<!-- eslint-disable vue/no-use-v-if-with-v-for -->
<!-- eslint-disable vue/valid-v-slot -->
<template>
  <div class="main-container">
    <TableBody>
      <template #header>
        <TableHeader ref="tableHeaderRef" :show-filter="false">
          <template #search-content>
            <a-form ref="seachForm" :model="form">
              <a-row :gutter="24">
                <a-col :span="4">
                  <a-form-item field="id" hide-label>
                    <a-input-group style="width: 100%">
                      <a-select
                        style="width: 50%"
                        @change="typeFn"
                        v-model="type"
                        placeholder="first"
                      >
                        <a-option v-for="item in typeLists" :key="item.name" :value="item.value">{{
                          item.name
                        }}</a-option>
                      </a-select>
                      <a-input
                        style="width: 50%"
                        v-model="typeText"
                        allow-clear
                        placeholder="请输入搜索条件"
                        ><template #suffix>
                          <icon-plus @click="open" style="cursor: pointer" /> </template
                      ></a-input>
                    </a-input-group>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="orderType" hide-label>
                    <a-select
                      class="width100"
                      v-model="form.orderType"
                      placeholder="请选择订单类型"
                      allow-clear
                    >
                      <a-option :value="0">直属订单</a-option>
                      <a-option :value="1">下属订单</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="mallIds" hide-label>
                    <a-select
                      allow-search
                      v-model="form.mallIds"
                      placeholder="请选择商品"
                      multiple
                      :max-tag-count="1"
                      allow-clear
                      :options="goodAllList"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="classIds" hide-label>
                    <a-select
                      v-model="form.classIds"
                      style="width: 100%"
                      multiple
                      :max-tag-count="1"
                      placeholder="请选择商品分类"
                      allow-clear
                      allow-search
                    >
                      <a-option v-for="item in classList" :key="item.id" :value="item.id">{{
                        item.name
                      }}</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>

                <a-col :span="4">
                  <a-form-item field="source " hide-label>
                    <a-select
                      class="width100"
                      v-model="form.source"
                      placeholder="请选择订单来源"
                      allow-clear
                    >
                      <a-option :value="0">商城下单</a-option>
                      <a-option :value="1">后台下单</a-option>
                      <a-option :value="2">前台下单</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="payType" hide-label>
                    <a-select
                      class="width100"
                      v-model="form.payType"
                      placeholder="请选择支付方式"
                      allow-clear
                    >
                      <a-option :value="1">支付宝</a-option>
                      <a-option :value="2">微信</a-option>
                      <a-option :value="0">余额</a-option>
                      <a-option :value="5">库存</a-option>
                      <a-option :value="3">接口</a-option>
                      <a-option :value="4">系统</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="state" hide-label>
                    <a-select
                      class="width100"
                      v-model="form.state"
                      placeholder="请选择订单状态"
                      allow-clear
                    >
                      <a-option v-for="item in orderStateList" :key="item.key" :value="item.key">{{
                        item.name
                      }}</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="operatorId" hide-label>
                    <a-select
                      class="width100"
                      v-model="form.operatorId"
                      placeholder="请选择运营商"
                      allow-clear
                    >
                      <a-option :value="0">中国移动</a-option>
                      <a-option :value="1">中国联通</a-option>
                      <a-option :value="2">中国电信</a-option>
                      <a-option :value="3">中国广电</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="channelId" hide-label>
                    <a-select
                      class="width100"
                      v-model="form.channelId"
                      placeholder="请选择商品渠道"
                      allow-clear
                    >
                      <a-option v-for="item in channelList" :key="item.id" :value="item.id">{{
                        item.name
                      }}</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="userIds" hide-label>
                    <a-select
                      v-model="form.userIds"
                      placeholder="请选择所属客户"
                      multiple
                      :max-tag-count="1"
                      allow-clear
                      allow-search
                      :options="userList"
                      :virtual-list-props="{ height: 200 }"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="expressDeliveryCompany" hide-label>
                    <a-select
                      v-model="form.expressDeliveryCompany"
                      style="width: 100%"
                      placeholder="请选择快递公司"
                      allow-clear
                      allow-search
                    >
                      <a-option v-for="item in kuaiList" :key="item.key" :value="item.key">{{
                        item.name
                      }}</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="commissionRule" hide-label>
                    <a-select
                      class="width100"
                      v-model="form.commissionRule"
                      placeholder="请选择佣金规则"
                      allow-clear
                    >
                      <a-option :value="0">秒返</a-option>
                      <a-option :value="1">次月底返</a-option>
                      <a-option :value="2">月月返</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="activation" hide-label>
                    <a-select
                      class="width100"
                      v-model="form.activation"
                      placeholder="请选择激活状态"
                      allow-clear
                    >
                      <a-option :value="true">已激活</a-option>
                      <a-option :value="false">未激活</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="firstCharge" hide-label>
                    <a-select
                      class="width100"
                      v-model="form.firstCharge"
                      placeholder="请选择首充状态"
                      allow-clear
                    >
                      <a-option :value="true">已首充</a-option>
                      <a-option :value="false">未首充</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="settlement" hide-label>
                    <a-select
                      class="width100"
                      v-model="form.settlement"
                      placeholder="请选择结算状态"
                      allow-clear
                    >
                      <a-option :value="true">已结算</a-option>
                      <a-option :value="false">未结算</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="tagRecord" hide-label>
                    <a-select
                      class="width100"
                      v-model="form.tagRecord"
                      placeholder="请选择标记状态"
                      allow-clear
                    >
                      <a-option :value="true">已标记</a-option>
                      <a-option :value="false">未标记</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="addTime" hide-label>
                    <a-date-picker
                      class="width100"
                      v-model="form.addTime"
                      show-time
                      :disabledDate="changeTraceEnd"
                      placeholder="请选择开始下单时间"
                      :time-picker-props="{ defaultValue: '12:00:00' }"
                      :shortcuts="[
                        {
                          label: '今日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endTime = $dayjs('23:59:59', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            ))
                          ),
                        },
                        {
                          label: '昨日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs('23:59:59', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '七日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(6, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '本月',
                          value: () => (
                            (form.addTime = $dayjs('01 00:00:00', 'DD HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '上月',
                          value: () => (
                            (form.addTime = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                              .subtract(1, 'month')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs()
                              .subtract(1, 'month')
                              .endOf('month')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                      ]"
                      format="YYYY-MM-DD HH:mm:ss"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="endTime" hide-label>
                    <a-date-picker
                      class="width100"
                      v-model="form.endTime"
                      show-time
                      :disabledDate="changeTraceStart"
                      :shortcuts="[
                        {
                          label: '今日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endTime = $dayjs('23:59:59', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            ))
                          ),
                        },
                        {
                          label: '昨日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs('23:59:59', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '七日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(6, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '本月',
                          value: () => (
                            (form.addTime = $dayjs('01 00:00:00', 'DD HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '上月',
                          value: () => (
                            (form.addTime = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                              .subtract(1, 'month')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs()
                              .subtract(1, 'month')
                              .endOf('month')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                      ]"
                      placeholder="请选择结束下单时间"
                      :time-picker-props="{ defaultValue: '12:00:00' }"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="addActivationTime" hide-label>
                    <a-date-picker
                      class="width100"
                      v-model="form.addActivationTime"
                      show-time
                      placeholder="请选择开始激活时间"
                      :time-picker-props="{ defaultValue: '12:00:00' }"
                      :shortcuts="[
                        {
                          label: '今日',
                          value: () => (
                            (form.addActivationTime = $dayjs('00:00:00', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endActivationTime = $dayjs('23:59:59', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            ))
                          ),
                        },
                        {
                          label: '昨日',
                          value: () => (
                            (form.addActivationTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endActivationTime = $dayjs('23:59:59', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '七日',
                          value: () => (
                            (form.addActivationTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(6, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endActivationTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '本月',
                          value: () => (
                            (form.addActivationTime = $dayjs('01 00:00:00', 'DD HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endActivationTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '上月',
                          value: () => (
                            (form.addActivationTime = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                              .subtract(1, 'month')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endActivationTime = $dayjs()
                              .subtract(1, 'month')
                              .endOf('month')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                      ]"
                      format="YYYY-MM-DD HH:mm:ss"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="endActivationTime" hide-label>
                    <a-date-picker
                      class="width100"
                      v-model="form.endActivationTime"
                      show-time
                      :shortcuts="[
                        {
                          label: '今日',
                          value: () => (
                            (form.addActivationTime = $dayjs('00:00:00', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endActivationTime = $dayjs('23:59:59', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            ))
                          ),
                        },
                        {
                          label: '昨日',
                          value: () => (
                            (form.addActivationTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endActivationTime = $dayjs('23:59:59', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '七日',
                          value: () => (
                            (form.addActivationTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(6, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endActivationTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '本月',
                          value: () => (
                            (form.addActivationTime = $dayjs('01 00:00:00', 'DD HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endActivationTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '上月',
                          value: () => (
                            (form.addActivationTime = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                              .subtract(1, 'month')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endActivationTime = $dayjs()
                              .subtract(1, 'month')
                              .endOf('month')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                      ]"
                      placeholder="请选择结束激活时间"
                      :time-picker-props="{ defaultValue: '12:00:00' }"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="addFirstChargeTime" hide-label>
                    <a-date-picker
                      class="width100"
                      v-model="form.addFirstChargeTime"
                      show-time
                      placeholder="请选择开始首充时间"
                      :time-picker-props="{ defaultValue: '12:00:00' }"
                      :shortcuts="[
                        {
                          label: '今日',
                          value: () => (
                            (form.addFirstChargeTime = $dayjs('00:00:00', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endFirstChargeTime = $dayjs('23:59:59', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            ))
                          ),
                        },
                        {
                          label: '昨日',
                          value: () => (
                            (form.addFirstChargeTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endFirstChargeTime = $dayjs('23:59:59', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '七日',
                          value: () => (
                            (form.addFirstChargeTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(6, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endFirstChargeTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '本月',
                          value: () => (
                            (form.addFirstChargeTime = $dayjs('01 00:00:00', 'DD HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endFirstChargeTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '上月',
                          value: () => (
                            (form.addFirstChargeTime = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                              .subtract(1, 'month')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endFirstChargeTime = $dayjs()
                              .subtract(1, 'month')
                              .endOf('month')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                      ]"
                      format="YYYY-MM-DD HH:mm:ss"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="endFirstChargeTime" hide-label>
                    <a-date-picker
                      class="width100"
                      v-model="form.endFirstChargeTime"
                      show-time
                      :shortcuts="[
                        {
                          label: '今日',
                          value: () => (
                            (form.addFirstChargeTime = $dayjs('00:00:00', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endFirstChargeTime = $dayjs('23:59:59', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            ))
                          ),
                        },
                        {
                          label: '昨日',
                          value: () => (
                            (form.addFirstChargeTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endFirstChargeTime = $dayjs('23:59:59', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '七日',
                          value: () => (
                            (form.addFirstChargeTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(6, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endFirstChargeTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '本月',
                          value: () => (
                            (form.addFirstChargeTime = $dayjs('01 00:00:00', 'DD HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endFirstChargeTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '上月',
                          value: () => (
                            (form.addFirstChargeTime = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                              .subtract(1, 'month')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endFirstChargeTime = $dayjs()
                              .subtract(1, 'month')
                              .endOf('month')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                      ]"
                      placeholder="请选择结束首充时间"
                      :time-picker-props="{ defaultValue: '12:00:00' }"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="addNum" hide-label>
                    <a-input-group style="width: 100%">
                      <a-input v-model="form.addNum" placeholder="开始下单数量" allow-clear />
                      <a-input v-model="form.endNum" placeholder="结束下单数量" allow-clear />
                    </a-input-group>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="addOrderAmount" hide-label>
                    <a-input-group style="width: 100%">
                      <a-input
                        v-model="form.addOrderAmount"
                        placeholder="开始订单金额"
                        allow-clear
                      />
                      <a-input
                        v-model="form.endOrderAmount"
                        placeholder="结束订单金额"
                        allow-clear
                      />
                    </a-input-group>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="addExpressFee" hide-label>
                    <a-input-group style="width: 100%">
                      <a-input v-model="form.addExpressFee" placeholder="开始快递费" allow-clear />
                      <a-input v-model="form.endExpressFee" placeholder="结束快递费" allow-clear />
                    </a-input-group>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="addExpressFee" hide-label>
                    <a-input-group style="width: 100%">
                      <a-input
                        v-model="form.addExpressFee"
                        placeholder="开始订单佣金"
                        allow-clear
                      />
                      <a-input
                        v-model="form.endExpressFee"
                        placeholder="结束订单佣金"
                        allow-clear
                      />
                    </a-input-group>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="addExpressFee" hide-label>
                    <a-input-group style="width: 100%">
                      <a-input
                        v-model="form.addExpressFee"
                        placeholder="开始商品佣金"
                        allow-clear
                      />
                      <a-input
                        v-model="form.endExpressFee"
                        placeholder="结束商品佣金"
                        allow-clear
                      />
                    </a-input-group>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="btns" hide-label>
                    <a-space :size="15">
                      <a-button type="primary" html-type="submit" @click="doRefresh(1)">
                        <template #icon> <icon-search /> </template>
                        搜索
                      </a-button>
                      <a-button @click="resetFn">
                        <template #icon>
                          <icon-sync theme="outline" size="14" />
                        </template>
                        <template #default>重置</template>
                      </a-button>
                    </a-space>
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>
          </template>
        </TableHeader>
      </template>
      <template #table-config>
        <a-space :size="15">
          <!-- <a-button type="outline">
            <template #default>导出</template>
</a-button> -->
          <!-- <a-button type="outline" @click="openDeliverys">
            <template #default>批量发货</template>
          </a-button> -->
        </a-space>
        <a-space :size="15">
          <TableConfig
            @update-border="onUpdateBorder"
            @update-striped="onUpdateStriped"
            @refresh="doRefresh"
          />
        </a-space>
      </template>
      <template #default>
        <a-table
          :loading="tables.tableLoading"
          :bordered="{ wrapper: true, cell: tables.bordered }"
          :stripe="(tables.striped as boolean)"
          :row-class-name="rowClassNameFun"
          :data="table.dataList"
          :pagination="false"
          :column-resizable="true"
          :rowKey="rowKey"
          table-layout-fixed
          :scrollbar="{ type: 'track', outerClass: '', outerStyle: '' }"
          :scroll="{ x: 1500 }"
        >
          <template #columns>
            <a-table-column
              v-for="item of tableColumns.list"
              :key="item.key"
              align="left"
              :title="(item.title as string)"
              :data-index="(item.key as string)"
              :width="item.width"
              :ellipsis="true"
              :fixed="item.fixed"
            >
              <template v-if="item.key === 'systemOrderNumber'" #cell="{ record }">
                <a-space>
                  <div class="box1" style="margin-top: 3px">
                    <div style="position: relative">
                      <a-image
                        class="goodsImage"
                        style="height: 115px; width: 105px; overflow: hidden"
                        :src="reSetImage(record.mallOrderItems[0].img[0])"
                        :preview="false"
                        @click="openImg(record.mallOrderItems[0])"
                      />
                      <div
                        style="
                          background-color: rgba(0, 0, 0, 0.5);
                          position: absolute;
                          font-size: 13px;
                          bottom: 0;
                          height: 20px;
                          width: 100%;
                          line-height: 20px;
                          text-align: center;
                          color: #ffffff;
                        "
                        >{{ record.paymentAmount }}元</div
                      >
                      <div
                        style="
                          background-color: rgba(0, 0, 0, 0.5);
                          position: absolute;
                          font-size: 13px;
                          top: 0;
                          height: 20px;
                          line-height: 20px;
                          padding: 0 5px;
                          text-align: center;
                          color: #ffffff;
                          border-radius: 0 0 5px 0;
                        "
                        >{{ record.mallOrderItems.length }}</div
                      >
                    </div>
                    <div class="texts" style="width: 250px">
                      <a-tooltip :content="record.mallOrderItems[0].mallName">
                        <div style="display: flex; align-items: center">
                          <img
                            v-if="record.payType == 0"
                            src="@/assets/order/y.jpg"
                            style="height: 20px; width: 20px"
                          />
                          <img
                            v-if="record.payType == 1"
                            src="@/assets/order/zf.png"
                            style="height: 20px; width: 20px"
                          />
                          <img
                            v-if="record.payType == 2"
                            src="@/assets/order/w.png"
                            style="height: 20px; width: 20px"
                          />
                          <img
                            src="@/assets/ku.png"
                            v-if="record.payType == 5"
                            style="height: 20px; width: 20px"
                          />
                          <img
                            src="@/assets/sys.png"
                            v-if="record.payType == 4"
                            style="height: 20px; width: 20px"
                          />

                          <p
                            @click="openInfo(record)"
                            class="textItem"
                            style="color: #3491fa; font-size: 15px; margin-left: 10px"
                          >
                            {{ record.mallOrderItems[0].mallName }}</p
                          >
                        </div>
                      </a-tooltip>
                      <p class="textItem">订单ID： {{ record.id }}</p>
                      <p class="textItem"
                        >订单来源： <span v-if="record.source == 0">商城下单</span>
                        <span v-if="record.source == 1">后台下单</span>
                        <span v-if="record.source == 2">API接口</span></p
                      >
                      <a-tooltip :content="record.userName ? record.userName : '管理员'">
                        <p class="textItem"
                          >所属客户： {{ record.userName ? record.userName : '管理员' }}</p
                        >
                      </a-tooltip>
                      <p class="textItem"
                        >生产号码：{{ record.recipientNumber
                        }}<span
                          v-if="record.recipientNumber"
                          style="font-size: 12px; color: #3491fa; cursor: pointer; margin-left: 3px"
                          @click="useCommon.copy(record.recipientNumber)"
                          >复制</span
                        ></p
                      >
                      <p class="textItem">
                        <a-tag color="blue" bordered size="small"
                          >商品ID:{{ record.mallOrderItems[0].id }}</a-tag
                        >
                        <a-tag color="green" bordered size="small" style="margin-left: 5px"
                          >数量:{{ record.mallOrderItems[0].number }}</a-tag
                        >
                      </p>
                    </div>
                  </div>
                </a-space>
              </template>
              <template v-else-if="item.key === 'mainImage'" #cell="{ record }">
                <a-space>
                  <div class="box1">
                    <div
                      class="texts"
                      style="margin-left: 0px; width: 260px; align-content: center"
                    >
                      <a-tooltip :content="record.userRemarks ? record.userRemarks : '无'">
                        <p class="textItem"
                          >下单备注：{{ record.userRemarks ? record.userRemarks : '- - -' }}</p
                        >
                      </a-tooltip>
                      <p class="textItem" style="margin-left: 0px; width: 260px"
                        >下单时间：{{ record.createTime }}
                      </p>
                      <!-- <p class="textItem" style="margin-left: 0px; width: 260px"
                        >更新时间：{{ record.createTime }}
                      </p> -->
                      <p class="textItem" style="margin-left: 0px; width: 260px"
                        >系统单号：{{ record.systemTradeNo }}
                        <span
                          style="font-size: 12px; color: #3491fa; cursor: pointer"
                          @click="useCommon.copy(record.systemTradeNo)"
                          >复制</span
                        >
                      </p>
                      <p class="textItem" style="margin-left: 0px; width: 260px"
                        >上游单号：{{ record.upstreamOrderNumber }}
                        <span
                          v-if="record.upstreamOrderNumber"
                          style="font-size: 12px; color: #3491fa; cursor: pointer"
                          @click="useCommon.copy(record.upstreamOrderNumber)"
                          >复制</span
                        >
                      </p>
                    </div>
                  </div>
                </a-space>
              </template>
              <template v-else-if="item.key === 'packageFee'" #cell="{ record, rowIndex }">
                <div class="box1">
                  <div class="texts" style="margin-left: 0px; align-content: center">
                    <span class="textItem" style="margin-left: 0px"
                      >真实姓名：{{ record.expressName }}-{{ record.ages }}</span
                    >
                    <p class="textItem" style="margin-left: 0px" v-if="showPhoneNum == record.id"
                      >客户电话：{{ record.expressPhone }}&nbsp;<icon-eye-invisible
                        @click="showPhoneNumber(record, rowIndex)"
                        style="color: rgb(var(--primary-6)); cursor: pointer"
                        size="16"
                      />
                    </p>
                    <p class="textItem" style="margin-left: 0px; width: 220px" v-else
                      >客户电话：{{
                        record.expressPhone.replace(
                          record.expressPhone.substring(3, 8),
                          '********'
                        )
                      }}&nbsp;<icon-eye
                        @click="showPhoneNumber(record, rowIndex)"
                        style="color: rgb(var(--primary-6)); cursor: pointer"
                        size="16"
                    /></p>
                    <p class="textItem" style="margin-left: 0px" v-if="showIdNum == record.id"
                      >身份证号：{{ record.expressIdCard }}
                      <icon-eye-invisible
                        @click="showIdNumber(record, rowIndex)"
                        style="color: rgb(var(--primary-6)); cursor: pointer"
                        size="16"
                    /></p>
                    <p class="textItem" style="margin-left: 0px" v-else
                      >身份证号：<span v-if="record.expressIdCard"
                        >{{
                          record.expressIdCard.replace(
                            record.expressIdCard.substring(5, 13),
                            '********'
                          )
                        }}<icon-eye
                          @click="showIdNumber(record, rowIndex)"
                          style="color: rgb(var(--primary-6)); cursor: pointer"
                          size="16"
                      /></span>
                    </p>
                    <a-tooltip :content="record.regionalName + record.expressAddress">
                      <p class="textItems" style="margin-left: 0px"
                        >收货地址：{{ record.regionalName }}{{ record.expressAddress }}
                      </p>
                    </a-tooltip>
                  </div>
                </div>
              </template>
              <template v-else-if="item.key === 'kuaidi'" #cell="{ record }">
                <a-space>
                  <div class="box1">
                    <div class="texts" style="margin-left: 0px; align-content: center">
                      <p class="textItem"
                        >快递状态：<span v-if="record.expressState">暂无 </span>
                        <span v-else>---</span></p
                      >
                      <p class="textItem"
                        >快递公司：
                        <span v-if="record.expressDeliveryCompany">
                          <span
                            v-for="(item, index) in kuaiList"
                            :key="index"
                            v-show="
                              record.expressDeliveryCompany &&
                              record.expressDeliveryCompany == item.key
                            "
                          >
                            {{ item.name }}</span
                          >
                        </span>
                        <span v-else>- - -</span>
                      </p>
                      <a-tooltip :content="record.expressTradeNo ? record.expressTradeNo : '- - -'">
                        <p class="textItem"
                          >快递单号：{{
                            record.expressTradeNo ? record.expressTradeNo : '- - -'
                          }}</p
                        >
                      </a-tooltip>
                      <a-tooltip :content="record.adminRemark ? record.adminRemark : '- - -'">
                        <p class="textItem"
                          >处理备注：{{ record.adminRemark ? record.adminRemark : '- - -' }}</p
                        >
                      </a-tooltip>
                    </div>
                  </div>
                </a-space>
              </template>
              <template v-else-if="item.key === 'state'" #cell="{ record }">
                <a-space>
                  <div class="box1">
                    <div class="texts" style="margin-left: 0px; align-content: center">
                      <p class="textItem"
                        >订单状态：
                        <a-tag
                          v-for="item in orderStateList"
                          :key="item.key"
                          v-show="item.key == record.state"
                          :color="item.color"
                          size="small"
                          >{{ item.name }}</a-tag
                        >
                        <a-tag v-if="record.firstChargeTime"
                          >首充{{ record.firstChargeAmount }}元</a-tag
                        >
                      </p>
                      <p class="textItem"
                        >激活时间：{{ record.activationTime ? record.activationTime : '未激活' }}
                      </p>
                      <p class="textItem"
                        >首充时间：{{ record.firstChargeTime ? record.firstChargeTime : '未首充' }}
                      </p>
                      <a-tooltip :content="record.failedRemarks ? record.failedRemarks : '- - -'">
                        <p class="textItem"
                          >失败备注：{{ record.failedRemarks ? record.failedRemarks : '- - -' }}</p
                        >
                      </a-tooltip>
                      <a-tooltip
                        :content="record.tagRecordList ? record.tagRecordList[0].remarks : '- - -'"
                      >
                        <p class="textItem"
                          >标记备注：
                          <img
                            v-if="record.tagRecordList"
                            style="width: 17px; height: 17px"
                            :src="record.tagRecordList[0].link"
                          />{{
                            record.tagRecordList ? record.tagRecordList[0].remarks : '- - -'
                          }}</p
                        >
                      </a-tooltip>
                    </div>
                  </div>
                </a-space>
              </template>
              <template v-else-if="item.key === 'commission'" #cell="{ record }">
                <a-space>
                  <div class="box1">
                    <div class="texts" style="margin-left: 0px; align-content: center">
                      <p class="textItem">订单佣金: {{ record.profit ? record.profit : 0 }}元</p>
                      <p class="textItem">商品佣金: {{ record.commission }}元</p>
                      <p class="textItem"
                        >佣金规则：{{
                          record.commissionRule == 0
                            ? '秒返'
                            : record.commissionRule == 1
                            ? '次月底返'
                            : record.commissionRule == 2
                            ? '月月返'
                            : '- - -'
                        }}
                      </p>
                      <p class="textItem"
                        >结算时间：{{ record.settlementTime ? record.settlementTime : '未结算' }}
                      </p>
                      <a-tooltip
                        :content="record.settlementRemarks ? record.settlementRemarks : '- - -'"
                      >
                        <p class="textItem"
                          >结算备注：{{
                            record.settlementRemarks ? record.settlementRemarks : '- - -'
                          }}
                        </p>
                      </a-tooltip>
                    </div>
                  </div>
                </a-space>
              </template>
              <template v-if="item.key === 'actions'" #cell="{ record }">
                <div style="width: 168px; display: flex; flex-wrap: wrap">
                  <a-button class="list-button" type="text" size="small" @click="openInfo(record)"
                    >详情</a-button
                  >
                  <a-button class="list-button" type="text" size="small" @click="openUpdate(record)"
                    >编辑</a-button
                  >
                  <a-button
                    class="list-button"
                    type="text"
                    size="small"
                    @click="openDelivery(record)"
                    >发货</a-button
                  >
                  <!-- <a-button class="list-button" type="text" size="small">卡号</a-button> -->
                  <a-button class="list-button" type="text" size="small" @click="openRefund(record)"
                    >退款</a-button
                  >
                  <a-button class="list-button" type="text" size="small" @click="openMark(record)"
                    >标记</a-button
                  >
                  <a-button class="list-button" type="text" size="small" @click="openChange(record)"
                    >切单</a-button
                  >
                  <a-button
                    class="list-button"
                    type="text"
                    size="small"
                    @click="openCancel(2, record)"
                    >取消</a-button
                  >
                  <a-button
                    class="list-button"
                    type="text"
                    size="small"
                    @click="openCancel(1, record)"
                    >删除</a-button
                  >
                  <a-button
                    class="list-button"
                    type="text"
                    size="small"
                    @click="openCommission(record)"
                    >佣金</a-button
                  >
                  <a-button class="list-button" type="text" size="small" @click="openLog(record)"
                    >报文</a-button
                  >
                  <a-button class="list-button" type="text" size="small" @click="openPrint(record)"
                    >打单</a-button
                  >
                </div>
              </template>
            </a-table-column>
          </template>
        </a-table>
      </template>
      <template #footer>
        <TableFooter :pagination="pagination" position="center" />
      </template>
    </TableBody>
    <!-- 多项搜索 -->
    <a-modal
      v-model:visible="multipleVisible"
      @before-close="close"
      title="多条件搜索"
      width="400px"
      :mask-closable="false"
      title-align="start"
    >
      <a-textarea v-model="multipleText" placeholder="请输入搜索条件，一行一个" allow-clear />
      <template #footer>
        <a-space>
          <a-button @click="multipleVisible = false">取消</a-button>
          <a-button type="primary" @click="multipleFn">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 退款 -->
    <a-modal
      v-model:visible="refundVisible"
      title="订单退款"
      width="500px"
      :mask-closable="false"
      @before-close="beforeCloseRefund"
      title-align="start"
    >
      <a-form ref="refundRef" :auto-label-width="true" :model="refundForm">
        <a-form-item label="支付方式" field="typeName">
          <a-input hide-button readonly v-model="refundForm.typeName" />
        </a-form-item>
        <a-form-item label="支付金额" field="paymentAmount">
          <a-input hide-button readonly v-model="refundForm.paymentAmount" />
        </a-form-item>
        <a-form-item
          label="退款金额"
          field="refundNum"
          :rules="[{ required: true, message: '退款金额不能为空' }]"
          :validate-trigger="['change', 'input']"
          asterisk-position="end"
        >
          <a-input-number hide-button v-model="refundForm.refundNum" placeholder="请输入退款金额" />
        </a-form-item>
        <a-form-item label="退款备注" field="remark">
          <a-input hide-button v-model="refundForm.remark" placeholder="请输入退款备注" />
        </a-form-item>
        <a-form-item label="收回返佣" field="refundKickback">
          <a-radio-group class="radio-bcg" v-model="refundForm.refundKickback">
            <a-radio :value="true">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">收回</div>
                </div>
              </template>
            </a-radio>
            <a-radio :value="false">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">不收回</div>
                </div>
              </template>
            </a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="退款类型" field="refundType">
          <a-radio-group class="radio-bcg" v-model="refundForm.refundType">
            <a-radio :value="2">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">原路退款</div>
                </div>
              </template>
            </a-radio>
            <a-radio :value="1">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">手动退款</div>
                </div>
              </template>
            </a-radio>
          </a-radio-group>
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="beforeCloseRefund">取消</a-button>
          <a-button type="primary" @click="confirmRefund">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 编辑订单 -->
    <a-modal
      v-model:visible="updateVisible"
      title="编辑订单"
      width="500px"
      :mask-closable="false"
      @before-close="beforeCloseUpdate"
      title-align="start"
    >
      <a-alert style="margin-bottom: 20px; background-color: #e8f7ff" :show-icon="false">
        <span style="color: #3491fa">
          非自营渠道的订单，编辑数据后，订单再次同步时，会修改数据哦</span
        >
      </a-alert>
      <a-form ref="updateRef" :auto-label-width="true" :model="updateForm">
        <a-form-item
          label="姓名"
          field="expressName"
          :rules="[{ required: true, message: '姓名不能为空' }]"
          :validate-trigger="['change', 'input']"
          asterisk-position="end"
        >
          <a-input hide-button v-model="updateForm.expressName" placeholder="请输入姓名" />
        </a-form-item>
        <a-form-item
          label="手机号码"
          field="expressPhone"
          :rules="[{ required: true, message: '手机号码不能为空' }]"
          :validate-trigger="['change', 'input']"
          asterisk-position="end"
        >
          <a-input hide-button v-model="updateForm.expressPhone" placeholder="请输入手机号码" />
        </a-form-item>
        <a-form-item label="身份证号" field="expressIdCard">
          <a-input hide-button v-model="updateForm.expressIdCard" placeholder="请输入身份证号" />
        </a-form-item>
        <a-form-item label="身份证人像面" field="photoFullFace">
          <a-upload
            action="/app/admin/mall/file/upload/private"
            :show-file-list="false"
            @success="onCardSuccess1"
            @error="onError"
            :image-preview="true"
          >
            <template #upload-button>
              <div
                class="arco-upload-list-picture custom-upload-avatar"
                v-if="updateForm.photoFullFace"
              >
                <img
                  :src="
                    urla +
                    '/app/admin/mall/file/download/private?path=' +
                    encodeURIComponent(updateForm.photoFullFace)
                  "
                />
                <div class="arco-upload-list-picture-mask">
                  <IconEdit />
                </div>
              </div>
              <div class="arco-upload-picture-card" v-else>
                <div class="arco-upload-picture-card-text">
                  <IconPlus />
                </div>
              </div>
              <!-- </div> -->
            </template>
          </a-upload>
        </a-form-item>
        <a-form-item label="身份证国徽面" field="photoReverseSide">
          <a-upload
            action="/app/admin/mall/file/upload/private"
            :show-file-list="false"
            @success="onCardSuccess2"
            @error="onError"
            :image-preview="true"
          >
            <template #upload-button>
              <div
                class="arco-upload-list-picture custom-upload-avatar"
                v-if="updateForm.photoReverseSide"
              >
                <img
                  :src="
                    urla +
                    '/app/admin/mall/file/download/private?path=' +
                    encodeURIComponent(updateForm.photoReverseSide)
                  "
                />
                <div class="arco-upload-list-picture-mask">
                  <IconEdit />
                </div>
              </div>
              <div class="arco-upload-picture-card" v-else>
                <div class="arco-upload-picture-card-text">
                  <IconPlus />
                </div>
              </div>
              <!-- </div> -->
            </template>
          </a-upload>
        </a-form-item>
        <a-form-item label="免冠照" field="photoBareheaded">
          <a-upload
            action="/app/admin/mall/file/upload/private"
            :show-file-list="false"
            @success="onCardSuccess3"
            @error="onError"
            :image-preview="true"
          >
            <template #upload-button>
              <div
                class="arco-upload-list-picture custom-upload-avatar"
                v-if="updateForm.photoBareheaded"
              >
                <img
                  :src="
                    urla +
                    '/app/admin/mall/file/download/private?path=' +
                    encodeURIComponent(updateForm.photoBareheaded)
                  "
                />
                <div class="arco-upload-list-picture-mask">
                  <IconEdit />
                </div>
              </div>
              <div class="arco-upload-picture-card" v-else>
                <div class="arco-upload-picture-card-text">
                  <IconPlus />
                </div>
              </div>
              <!-- </div> -->
            </template>
          </a-upload>
        </a-form-item>
        <a-form-item label="地区" field="regionalCode">
          <a-cascader
            v-model="updateForm.regionalCode"
            :options="districtsList"
            :field-names="fieldNames"
            placeholder="请输入地区"
          />
        </a-form-item>
        <a-form-item
          label="详细地址"
          field="expressAddress"
          :rules="[{ required: true, message: '详细地址不能为空' }]"
          :validate-trigger="['change', 'input']"
          asterisk-position="end"
        >
          <a-input hide-button v-model="updateForm.expressAddress" placeholder="请输入详细地址" />
        </a-form-item>
        <a-form-item field="divideCustomersId" label="划分客户">
          <a-select
            v-model="updateForm.divideCustomersId"
            placeholder="请选择客户"
            allow-clear
            allow-search
            :options="userList"
            :virtual-list-props="{ height: 200 }"
          />
        </a-form-item>
        <a-form-item label="快递公司" field="expressDeliveryCompany">
          <a-select
            v-model="updateForm.expressDeliveryCompany"
            style="width: 100%"
            placeholder="请选择快递公司"
            allow-clear
            allow-search
          >
            <a-option v-for="item in kuaiList" :key="item.key" :value="item.key">{{
              item.name
            }}</a-option>
          </a-select>
        </a-form-item>
        <a-form-item label="快递单号" field="expressTradeNo">
          <a-input hide-button v-model="updateForm.expressTradeNo" placeholder="请输入快递单号" />
        </a-form-item>
        <a-form-item label="生产号码" field="recipientNumber">
          <a-input hide-button v-model="updateForm.recipientNumber" placeholder="请输入生产号码" />
        </a-form-item>
        <a-form-item label="上游单号" field="upstreamOrderNumber">
          <a-input
            hide-button
            v-model="updateForm.upstreamOrderNumber"
            placeholder="请输入上游单号"
          />
        </a-form-item>
        <a-form-item label="外部单号" field="externalOrderNumber">
          <a-input
            hide-button
            v-model="updateForm.externalOrderNumber"
            placeholder="请输入外部单号"
          />
        </a-form-item>
        <a-form-item
          label="订单状态"
          field="state"
          :rules="[{ required: true, message: '订单状态不能为空' }]"
          :validate-trigger="['change', 'input']"
          asterisk-position="end"
        >
          <a-select
            v-model="updateForm.state"
            style="width: 100%"
            placeholder="请选择订单状态"
            allow-clear
            allow-search
          >
            <a-option v-for="item in orderStateList" :key="item.key" :value="item.key">{{
              item.name
            }}</a-option>
          </a-select>
        </a-form-item>
        <a-form-item label="失败备注" field="failedRemarks">
          <a-input hide-button v-model="updateForm.failedRemarks" placeholder="请输入失败备注" />
        </a-form-item>
        <a-form-item label="处理备注" field="adminRemark">
          <a-input hide-button v-model="updateForm.adminRemark" placeholder="请输入处理备注" />
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="beforeCloseUpdate">取消</a-button>
          <a-button type="primary" @click="confirmUpdate">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 发货 -->
    <a-modal
      v-model:visible="deliveryVisible"
      title="订单发货"
      width="500px"
      :mask-closable="false"
      @before-close="beforeCloseDelivery"
      title-align="start"
    >
      <a-alert style="margin-bottom: 20px; background-color: #e8f7ff" :show-icon="false">
        <span style="color: #3491fa"> 只有自营渠道的订单可以进行发货</span>
      </a-alert>
      <a-form ref="deliveryRef" :auto-label-width="true" :model="deliveryForm">
        <a-form-item label="姓名" field="expressName">
          <a-input
            readonly
            hide-button
            v-model="deliveryForm.expressName"
            placeholder="请输入姓名"
          />
        </a-form-item>
        <a-form-item label="手机号码" field="expressPhone">
          <a-input
            readonly
            hide-button
            v-model="deliveryForm.expressPhone"
            placeholder="请输入手机号码"
          />
        </a-form-item>
        <a-form-item label="身份证号" field="expressIdCard">
          <a-input
            readonly
            hide-button
            v-model="deliveryForm.expressIdCard"
            placeholder="请输入身份证号"
          />
        </a-form-item>
        <a-form-item label="地区" field="regionalCode">
          <a-cascader
            disabled
            v-model="deliveryForm.regionalCode"
            :options="districtsList"
            :field-names="fieldNames"
            placeholder="请输入地区"
          />
        </a-form-item>
        <a-form-item label="详细地址" field="expressAddress">
          <a-input
            hide-button
            readonly
            v-model="deliveryForm.expressAddress"
            placeholder="请输入详细地址"
          />
        </a-form-item>
        <a-form-item label="快递渠道" field="expressChannelId">
          <a-select
            v-model="deliveryForm.expressChannelId"
            style="width: 100%"
            placeholder="请选择快递渠道"
            allow-clear
            allow-search
          >
            <a-option v-for="item in expressChannel" :key="item.id" :value="item.id">{{
              item.name
            }}</a-option>
          </a-select>
        </a-form-item>
        <a-form-item
          v-if="deliveryForm.expressChannelId"
          field="requestGenerationOrderWayBill"
          label="生成面单"
        >
          <a-radio-group class="radio-bcg" v-model="deliveryForm.requestGenerationOrderWayBill">
            <a-radio :value="true">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div> </div
                  ><div className="custom-radio-card-title">是</div>
                </div>
              </template>
            </a-radio>
            <a-radio :value="false">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div> </div
                  ><div className="custom-radio-card-title">否</div>
                </div>
              </template>
            </a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item
          v-if="!deliveryForm.expressChannelId"
          label="快递单号"
          field="expressTradeNo"
          :rules="[{ required: true, message: '快递单号不能为空' }]"
          :validate-trigger="['change', 'input']"
          asterisk-position="end"
        >
          <a-input hide-button v-model="deliveryForm.expressTradeNo" placeholder="请输入快递单号" />
        </a-form-item>
        <a-form-item
          label="快递公司"
          field="expressDeliveryCompany"
          :rules="[{ required: true, message: '快递公司不能为空' }]"
          :validate-trigger="['change', 'input']"
          asterisk-position="end"
        >
          <a-select
            v-model="deliveryForm.expressDeliveryCompany"
            style="width: 100%"
            placeholder="请选择快递公司"
            allow-clear
            allow-search
          >
            <a-option v-for="item in kuaiList" :key="item.key" :value="item.key">{{
              item.name
            }}</a-option>
          </a-select>
        </a-form-item>
        <a-form-item label="发货备注" field="adminRemark">
          <a-input hide-button v-model="deliveryForm.adminRemark" placeholder="请输入发货备注" />
        </a-form-item>
        <!-- <a-divider dashed style="margin-bottom: 25px">发货卡号</a-divider>
        <a-form-item label="发货卡号" field="expressTradeNo">
          <a-textarea v-model="multipleText" placeholder="请输入卡号，一行一个" allow-clear />
        </a-form-item>
        <a-form-item field="divideCustomersId" label="划分客户">
          <a-select
            v-model="updateForm.divideCustomersId"
            placeholder="请选择客户"
            allow-clear
            allow-search
            :options="userList"
            :virtual-list-props="{ height: 200 }"
          />
          <template #extra>
            <div>划卡客户为空时，自动划卡时，划卡到订单所属客户账号上</div>
          </template>
        </a-form-item>
        <a-form-item field="divideCustomersId" label="自动划卡">
          <a-radio-group class="radio-bcg" v-model="updateForm.divideCustomersId">
            <a-radio :value="true">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div> </div
                  ><div className="custom-radio-card-title">是</div>
                </div>
              </template>
            </a-radio>
            <a-radio :value="false">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div> </div
                  ><div className="custom-radio-card-title">否</div>
                </div>
              </template>
            </a-radio>
          </a-radio-group>
        </a-form-item> -->
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="beforeCloseDelivery">取消</a-button>
          <a-button type="primary" @click="confirmDelivery">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 批量发货 -->
    <a-modal
      v-model:visible="deliverysVisible"
      @before-close="close"
      title="批量发货"
      width="500px"
      :mask-closable="false"
      title-align="start"
    >
      <div>发货注意事项</div>
      <div style="font-size: 12px"
        >1：客户分享的订单如果涉及分销请带上卡号，否则无法正常分销佣金</div
      >
      <a-row style="margin-top: 10px">
        <a-col :span="11">
          <a-button style="width: 100%" @click="exportDeliverys">下载发货模板</a-button></a-col
        >
        <a-col :span="2">
          <div style="text-align: center"> - </div>
        </a-col>
        <a-col :span="11">
          <a-upload
            ref="sslU"
            :limit="1"
            action="/app/mall/order/batch/send"
            :file-list="listssa"
            @success="onSsl"
            @error="onError"
          >
            <template #upload-button>
              <a-button style="width: 100%" type="primary" class="width100">导入发货模板</a-button>
            </template>
          </a-upload></a-col
        >
      </a-row>
      <template #footer>
        <a-space>
          <a-button @click="multipleVisible = false">取消</a-button>
          <a-button type="primary" @click="multipleFn">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 订单详情 -->
    <a-drawer
      width="1000px"
      v-model:visible="infoVisible"
      title="订单详情"
      :footer="false"
      @close="closeDetail"
    >
      <div class="padding20" style="padding-top: 15px; padding-bottom: 10px">
        <div class="box">
          <div class="line"></div>
          <div class="text">基本信息 </div>
        </div>
      </div>
      <a-row style="padding: 0 20px">
        <a-col :span="12">
          <div class="display-box">
            <img
              v-if="infoForm.payType == 0"
              src="@/assets/order/y.jpg"
              style="height: 70px; width: 70px; overflow: hidden"
            />
            <img
              v-if="infoForm.payType == 1"
              src="@/assets/order/zf.png"
              style="height: 70px; width: 70px; overflow: hidden"
            />
            <img
              v-if="infoForm.payType == 2"
              src="@/assets/order/w.png"
              style="height: 70px; width: 70px; overflow: hidden"
            />
            <img
              src="@/assets/ku.png"
              v-if="infoForm.payType == 5"
              style="height: 70px; width: 70px; overflow: hidden"
            />
            <img
              src="@/assets/sys.png"
              v-if="infoForm.payType == 4"
              style="height: 70px; width: 70px; overflow: hidden"
            />
            <div class="display-right">
              <div>所属客户： {{ infoForm.userName ? infoForm.userName : '管理员' }}</div>
              <div class="text"
                >系统单号：{{ infoForm.systemTradeNo }}
                <icon-copy
                  @click="useCommon.copy(infoForm.systemTradeNo)"
                  class="aa"
                  size="18"
                  style="padding-left: 5px"
                />
              </div>
              <div class="text">下单时间：{{ infoForm.createTime }} </div>
            </div>
          </div>
        </a-col>
        <a-col :span="12">
          <div style="float: right">
            <div>
              <a-space style="float: right">
                <a-button class="button75" size="small" @click="previousFn"> 上一单</a-button>
                <a-button class="button75" size="small" @click="nextFn"> 下一单 </a-button>
                <a-button
                  type="primary"
                  status="warning"
                  size="small"
                  class="button75"
                  :loading="syncLoad"
                  @click="syncFn"
                  >同步订单</a-button
                >
                <a-button
                  type="primary"
                  status="success"
                  class="button75"
                  size="small"
                  @click="upFn"
                  >提交订单</a-button
                >
                <a-button
                  type="primary"
                  class="button75"
                  size="small"
                  @click="openDelivery(infoForm)"
                  >订单发货</a-button
                >
              </a-space>
            </div>
            <div class="white" style="margin-top: 14px; float: right">
              <a-space>
                <a-button size="small" class="button75" @click="openUpdate(infoForm)"
                  >编辑订单</a-button
                >
                <a-button size="small" class="button75" @click="openChange(infoForm)"
                  >切换订单</a-button
                >
                <a-button size="small" class="button75" @click="openMark(infoForm)"
                  >标记订单</a-button
                >
                <a-button size="small" class="button75" @click="openRefund(infoForm)"
                  >订单退款</a-button
                >
                <a-button size="small" class="button75" @click="openCancel(2, infoForm)"
                  >取消订单</a-button
                >
                <a-button size="small" class="button75" @click="openCancel(1, infoForm)"
                  >删除订单</a-button
                >
              </a-space>
            </div>
          </div>
        </a-col>
      </a-row>
      <div
        style="
          margin-top: 20px;
          border-top: 1px solid #f2f3f5;
          border-bottom: 1px solid #f2f3f5;
          padding: 20px 0;
        "
      >
        <a-grid :cols="6" :colGap="12" :rowGap="16" style="padding: 0 20px" class="grid-demo-grid">
          <a-grid-item class="demo-item">
            <div class="text-name">订单来源</div>
            <div class="text-info"
              >{{
                infoForm.source == 0 ? '商城下单' : infoForm.source == 1 ? '后台下单' : 'API接口'
              }}
            </div>
          </a-grid-item>
          <a-grid-item class="demo-item">
            <div class="text-name">订单状态</div>
            <div class="text-info">
              <span
                v-for="item in orderStateList"
                :key="item.key"
                v-show="infoForm.state == item.key"
              >
                {{ item.name }}
              </span>
            </div>
          </a-grid-item>
          <a-grid-item class="demo-item">
            <div class="text-name">支付金额</div>
            <div class="text-info">{{ infoForm.paymentAmount }} 元</div>
          </a-grid-item>
          <a-grid-item class="demo-item">
            <div class="text-name">快递费用</div>
            <div class="text-info">{{ infoForm.expressFee }}元 </div>
          </a-grid-item>
          <a-grid-item class="demo-item">
            <div class="text-name">订单佣金</div>
            <div class="text-info">{{ infoForm.profit ? infoForm.profit : 0 }}元 </div>
          </a-grid-item>
          <a-grid-item class="demo-item">
            <div class="text-name">商品佣金</div>
            <div class="text-info"
              >{{ infoForm.commission ? infoForm.commission : 0 }}元/{{
                infoForm.commissionRule == 0
                  ? '秒返'
                  : infoForm.commissionRule == 1
                  ? '次月底返'
                  : infoForm.commissionRule == 2
                  ? '月月返'
                  : '- - -'
              }}
            </div>
          </a-grid-item>
        </a-grid>
      </div>
      <div class="tabs-button padding20" style="padding-bottom: 0">
        <a-radio-group style="width: 100%" v-model="key" type="button">
          <a-radio value="detail">订单详情</a-radio>
          <a-radio value="rebates" @click="rebatesListFn(1)">订单返佣</a-radio>
          <a-radio value="expressDeliveryCompany">物流轨迹</a-radio>
          <a-radio value="change" @click="getStatusChangeDetailsFn(1)">状态日志</a-radio>
          <a-radio value="log" @click="massFn(1)">报文日志</a-radio>
          <a-radio value="up" @click="pushLogList(1)">推送日志</a-radio>
        </a-radio-group>
      </div>
      <div v-if="key == 'detail'">
        <div class="col-div" style="margin-bottom: 20px">
          <a-table
            :pagination="false"
            :columns="mallOrderColumns"
            :data="infoForm.mallOrderItems"
            :rowKey="rowKey"
          >
            <template #columns>
              <a-table-column
                v-for="item of mallOrderColumns"
                :key="item.key"
                :title="(item.title as string)"
                :data-index="(item.key as string)"
                align="left"
                :ellipsis="true"
                :tooltip="true"
              >
                <template v-if="item.key === 'salary'" #cell="{ record }">
                  <div style="display: flex">
                    <a-image
                      style="width: 40px; height: 40px"
                      :src="reSetImage(record.img[0])"
                      fit="contain"
                      alt=""
                      :preview="false"
                      @click="openImg(record)"
                    />
                    <div
                      style="
                        margin-left: 10px;
                        width: 170px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                      "
                    >
                      <div
                        style="
                          line-height: 20px;
                          font-size: 12px;
                          white-space: nowrap;
                          overflow: hidden;
                          text-overflow: ellipsis;
                        "
                        >{{ record.mallName }}</div
                      >
                      <div
                        style="
                          color: #86909c;
                          line-height: 20px;
                          font-size: 10px;
                          width: 170px;
                          white-space: nowrap;
                          overflow: hidden;
                          text-overflow: ellipsis;
                        "
                        >{{ record.shortIntroduce }}</div
                      >
                    </div>
                  </div>
                </template>
              </a-table-column>
            </template>
          </a-table>
          <div
            style="
              border: 1px solid rgba(229, 231, 235, var(--tw-border-opacity));
              border-top: 0;
              padding: 12px;
              text-align: left;
            "
            >统计：下单数量:{{ Math.floor(infoForm.goodsNum * 100) / 100 }}个
            <span style="margin-left: 10px"
              >商品成本:{{ Math.floor(infoForm.goodsCost * 100) / 100 }}元</span
            >
            <span style="margin-left: 10px"
              >总金额: {{ Math.floor(infoForm.goodsPrice * 100) / 100 }}元</span
            >
          </div>
        </div>
        <div class="col-div">
          <div>
            <div class="box">
              <div class="line"></div>
              <div class="text">下单信息 </div>
            </div>
          </div>
          <a-row>
            <a-col :span="12"
              >收货姓名：{{ infoForm.expressName }} -
              <span style="color: #3491fa">{{ infoForm.age }}</span></a-col
            >
            <a-col :span="12">手机号码：{{ infoForm.expressPhone }} </a-col>
            <a-col :span="12">身份证号码：{{ infoForm.expressIdCard }} </a-col>
            <a-col :span="12"
              >收货地址：{{ infoForm.regionalName }}{{ infoForm.expressAddress }}
            </a-col>
            <a-col :span="12">客户IP：{{ infoForm.ip }} {{ infoForm.ipAddress }}</a-col>
            <a-col :span="12">下单卡号：{{ infoForm.card }} </a-col>
            <a-col :span="12"
              >下单备注：{{ infoForm.userRemarks ? infoForm.userRemarks : '- - -' }}
            </a-col>
            <a-col :span="12"
              >处理备注：{{ infoForm.adminRemark ? infoForm.adminRemark : '- - -' }}
            </a-col>
            <a-col :span="12"
              >证件信息：
              <a-image
                v-if="infoForm.photoFullFace"
                class="img"
                :src="
                  urla +
                  '/app/admin/mall/file/download/private?path=' +
                  encodeURIComponent(infoForm.photoFullFace)
                "
              />

              <a-image
                v-if="infoForm.photoReverseSide"
                class="imgs"
                :src="
                  urla +
                  '/app/admin/mall/file/download/private?path=' +
                  encodeURIComponent(infoForm.photoReverseSide)
                "
              />

              <a-image
                v-if="infoForm.photoBareheaded"
                class="imgs"
                :src="
                  urla +
                  '/app/admin/mall/file/download/private?path=' +
                  encodeURIComponent(infoForm.photoBareheaded)
                "
              />
            </a-col>
          </a-row>
        </div>
        <div class="col-div">
          <div>
            <div class="box">
              <div class="line"></div>
              <div class="text">订单信息 </div>
            </div>
          </div>
          <a-row>
            <a-col :span="12">所属渠道：{{ infoForm.settlementTime }} </a-col>
            <a-col :span="12">外部单号：{{ infoForm.externalOrderNumber }} </a-col>
            <a-col :span="12">生产号码：{{ infoForm.recipientNumber }} </a-col>
            <a-col :span="12"
              >快递公司：<span
                v-for="item in kuaiList"
                :key="item.key"
                v-show="item.key == infoForm.expressDeliveryCompany"
                >{{ item.name }}</span
              >
            </a-col>
            <a-col :span="12">快递单号：{{ infoForm.expressTradeNo }} </a-col>
            <a-col :span="12"
              >首充时间：{{ infoForm.firstChargeTime ? infoForm.firstChargeTime : '未首充' }}
            </a-col>
            <a-col :span="12">首充金额：{{ infoForm.firstChargeAmount }} </a-col>
            <a-col :span="12"
              >激活时间：{{ infoForm.activationTime ? infoForm.activationTime : '未激活' }}
            </a-col>
            <a-col :span="12"
              >结算时间：{{ infoForm.settlementTime ? infoForm.settlementTime : '未结算' }}
            </a-col>
            <a-col :span="12"
              >客户层级：<span
                v-if="userListse.length > 0"
                v-for="(item, index) in userListse"
                :key="item.id"
                >{{ item.userName }} <span v-show="index + 1 != userListse.length">-></span></span
              >
            </a-col>

            <a-col :span="12">失败备注：{{ infoForm.failedRemarks }} </a-col>
          </a-row>
        </div>
        <div class="col-div">
          <div>
            <div class="box">
              <div class="line"></div>
              <div class="text">支付信息 </div>
            </div>
          </div>
          <a-row>
            <a-col :span="12">支付商户号：{{ infoForm.expressName }} </a-col>
            <a-col :span="12">商户订单号：{{ infoForm.outTradeNo }} </a-col>
            <a-col :span="12">支付订单号：{{ infoForm.tradeNo }} </a-col>
            <a-col :span="12">上游订单号：{{ infoForm.upstreamOrderNumber }} </a-col>
            <a-col :span="12">下游订单号：{{ infoForm.externalOrderNumber }} </a-col>
          </a-row>
        </div>
        <div class="col-div">
          <div>
            <div class="box">
              <div class="line"></div>
              <div class="text">退款信息 </div>
            </div>
          </div>
          <a-row>
            <a-col :span="12"
              >退款类型：{{
                infoForm.refundType == 1 ? '手动退款' : infoForm.refundType == 2 ? '原路退回' : ''
              }}
            </a-col>
            <a-col :span="12">退款金额：{{ infoForm.refundAmount }} </a-col>
            <a-col :span="12">退款时间：{{ infoForm.refundTime }} </a-col>
            <a-col :span="12">退款备注：{{ infoForm.refundRemarks }} </a-col>
          </a-row>
        </div>
      </div>
      <div v-if="key == 'rebates'" class="col-div">
        <div>
          <div class="box">
            <div class="line"></div>
            <div class="text">订单信息 </div>
          </div>
        </div>
        <a-row>
          <a-col :span="12"
            >首充时间：{{ infoForm.firstChargeTime ? infoForm.firstChargeTime : '未首充' }}
          </a-col>
          <a-col :span="12">首充金额：{{ infoForm.firstChargeAmount }} </a-col>
          <a-col :span="12"
            >激活时间：{{ infoForm.activationTime ? infoForm.activationTime : '未激活' }}
          </a-col>
          <a-col :span="12"
            >结算时间：{{ infoForm.settlementTime ? infoForm.settlementTime : '未结算' }}
          </a-col>
          <a-col :span="12">失败备注：{{ infoForm.adminRemark }} </a-col>
        </a-row>
        <div>
          <div class="box">
            <div class="line"></div>
            <div class="text">订单佣金 </div>
          </div>
        </div>
        <a-table
          :bordered="{ wrapper: true, cell: tables.bordered }"
          :stripe="(tables.striped as boolean)"
          :loading="tableLoading"
          :data="rebatesList"
          :pagination="false"
          :column-resizable="true"
          :rowKey="rowKey"
          :columns="reCom"
          :scrollbar="true"
          table-layout-fixed
        >
          <template #columns>
            <a-table-column
              v-for="item of reCom"
              :key="item.key"
              align="left"
              :width="item.width"
              :ellipsis="true"
              :tooltip="true"
              :title="(item.title as string)"
              :data-index="(item.key as string)"
              :fixed="item.fixed"
            >
              <template v-if="item.key === 'rebateState'" #cell="{ record }">
                <a-tag v-if="record.rebateState === 0">等待返佣</a-tag>
                <a-tag color="blue" v-else-if="record.rebateState === 1">返佣成功</a-tag>
                <a-tag color="red" v-else-if="record.rebateState === 2">返佣失败</a-tag>
                <a-tag color="red" v-else-if="record.rebateState === 3">收回返佣</a-tag>
              </template>
              <template v-else-if="item.key === 'action'" #cell="{ record }">
                <a-button type="text" @click="rebateDel(record.id, 1, [])">收回佣金</a-button>
              </template>
            </a-table-column>
          </template>
        </a-table>
        <div>
          <div class="box">
            <div class="line"></div>
            <div class="text">商品佣金 </div>
          </div>
        </div>
        <a-table
          style="margin-bottom: 30px"
          :bordered="{ wrapper: true, cell: tables.bordered }"
          :stripe="(tables.striped as boolean)"
          :loading="tableLoading"
          :data="rebatesList"
          :pagination="false"
          :column-resizable="true"
          :rowKey="rowKey"
          :columns="reCom"
          :scrollbar="true"
          table-layout-fixed
        >
          <template #columns>
            <a-table-column
              v-for="item of reCom"
              :key="item.key"
              align="left"
              :width="item.width"
              :ellipsis="true"
              :tooltip="true"
              :title="(item.title as string)"
              :data-index="(item.key as string)"
              :fixed="item.fixed"
            >
              <template v-if="item.key === 'rebateState'" #cell="{ record }">
                <a-tag v-if="record.commissionState === 0">已冻结</a-tag>
                <a-tag color="blue" v-else-if="record.commissionState === 1">已成功</a-tag>
                <a-tag color="red" v-else-if="record.commissionState === 2">已失败</a-tag>
                <a-tag color="red" v-else-if="record.commissionState === 3">已收回</a-tag>
              </template>
              <template v-if="item.key === 'rebateAmount'" #cell="{ record }">
                <span @click="detailFn(record)"> {{ record.commission }}</span>
              </template>
              <template v-else-if="item.key === 'action'" #cell="{ record }">
                <a-button type="text" @click="openHui(record)">收回佣金</a-button>
              </template>
            </a-table-column>
          </template>
        </a-table>
      </div>
      <div v-if="key == 'log'" class="col-div">
        <div>
          <div class="box">
            <div class="line"></div>
            <div class="text">订单详情 </div>
          </div>
        </div>
        <a-row>
          <a-col :span="12">上游单号：{{ infoForm.upstreamOrderNumber }} </a-col>
        </a-row>
        <div>
          <div class="box">
            <div class="line"></div>
            <div class="text">日志详情 </div>
          </div>
        </div>
        <a-table :columns="columns" :loading="tableLoading" :pagination="false" :data="massList">
          <template #columns>
            <a-table-column
              v-for="item of columns"
              :key="item.dataIndex"
              align="left"
              :width="item.width"
              :title="(item.title as string)"
              :ellipsis="true"
              :tooltip="true"
            >
              <template v-if="item.dataIndex === 'name'" #cell="{ record }">
                <span>{{ record.adminName ? record.adminName : '- - -' }}</span>
              </template>
              <template v-if="item.dataIndex === 'type'" #cell="{ record }">
                <span>{{
                  record.type == 1 ? '手动提交' : record.type == 2 ? '自动提交' : '批量'
                }}</span>
              </template>
              <template v-if="item.dataIndex === 'timing'" #cell="{ record }">
                <span>{{ Math.floor((record.timing / 1000) * 100) / 100 }}秒</span>
              </template>
              <template v-if="item.dataIndex === 'time'" #cell="{ record }">
                <span>{{ record.time }}</span>
              </template>
              <template v-if="item.dataIndex === 'success'" #cell="{ record }">
                <a-tag color="red" v-if="record.success == false">失败</a-tag>
                <a-tag color="blue" v-else-if="record.success == true">成功</a-tag>
              </template>
              <template v-if="item.dataIndex === 'actions'" #cell="{ record }">
                <a-space :size="2">
                  <a-button
                    style="padding: 0px 4px"
                    type="text"
                    size="small"
                    @click="detailFny(record)"
                    >详情</a-button
                  >
                </a-space>
              </template>
            </a-table-column>
          </template>
        </a-table>
        <TableFooter ref="tableFooterRef" :pagination="paginationLog" />
      </div>
      <div v-if="key == 'change'" class="col-div">
        <div>
          <div class="box">
            <div class="line"></div>
            <div class="text">订单信息 </div>
          </div>
        </div>
        <a-table :data="stateList" :loading="stateLoad" :pagination="false">
          <template #columns>
            <a-table-column
              v-for="item of columns_state"
              :key="item.key"
              align="left"
              :title="(item.title as string)"
              :width="item.width"
              :data-index="(item.key as string)"
            >
              <template v-if="item.key === 'ago'" #cell="{ record }">
                <span
                  v-for="(items, index) in orderStateList"
                  :key="index"
                  v-show="items.key == record.ago"
                >
                  <a-tooltip :content="items.desc">
                    <a-button type="text" style="color: #000000">{{ items.name }}</a-button>
                  </a-tooltip>
                </span>
              </template>
              <template v-else-if="item.key === 'after'" #cell="{ record }">
                <span
                  v-for="(items, index) in orderStateList"
                  :key="index"
                  v-show="items.key == record.after"
                >
                  <a-tooltip :content="items.desc">
                    <a-button type="text" style="color: #000000">{{ items.name }}</a-button>
                  </a-tooltip>
                </span>
              </template>
              <template v-else-if="item.key === 'remarks'" #cell="{ record }">
                <span v-if="record.remarks">
                  {{ record.remarks }}
                </span>
                <span v-else> - - - </span>
              </template>
              <template v-else-if="item.key === 'operationType'" #cell="{ record }">
                <span v-if="record.operationType == 1">人工更改</span>
                <span v-if="record.operationType == 2">系统处理</span>
                <span v-if="record.operationType == 3">推送更改</span>
                <span v-if="record.operationType == 4">手动刷新</span>
                <span v-if="record.operationType == 5">系统轮询</span>
              </template>
            </a-table-column>
          </template>
        </a-table>
        <TableFooter ref="tableFooterRef" :pagination="paginationLogs" />
      </div>
      <div v-if="key == 'expressDeliveryCompany'" class="col-div">
        <div>
          <div class="box">
            <div class="line"></div>
            <div class="text">快递信息 </div>
          </div>
        </div>
        <a-row>
          <!-- <a-col :span="12"
            >快递状态：<span v-if="infoForm.expressState">
              <span
                v-for="(item, index) in kuaiList"
                :key="index"
                v-show="infoForm.expressState == item.state"
              >
                {{ item.name }}</span
              >
            </span>
            <span v-else>- - -</span>
          </a-col> -->
          <a-col :span="12"
            >快递公司：
            <span v-if="infoForm.expressDeliveryCompany">
              <span
                v-for="(item, index) in kuaiList"
                :key="index"
                v-show="
                  infoForm.expressDeliveryCompany && infoForm.expressDeliveryCompany == item.key
                "
              >
                {{ item.name }}</span
              >
            </span>

            <span v-else>---</span>
          </a-col>
          <a-col :span="12"
            >快递单号：{{ infoForm.expressTradeNo ? infoForm.expressTradeNo : '- - -' }}
          </a-col>
        </a-row>
        <div style="border-top: 1px solid #f2f3f5; padding-top: 20px">
          <!-- <a-timeline mode="left" labelPosition="relative">
            <a-timeline-item label="2012-08">12121212</a-timeline-item>
          </a-timeline> -->
        </div>
      </div>
      <div v-if="key == 'up'" class="col-div">
        <div>
          <div class="box">
            <div class="line"></div>
            <div class="text">订单信息 </div>
          </div>
        </div>
        <a-row>
          <a-col :span="12">上游单号：{{ infoForm.upstreamOrderNumber }} </a-col>
          <a-col :span="12">外部单号：{{ infoForm.externalOrderNumber }} </a-col>
        </a-row>
        <div>
          <div class="box">
            <div class="line"></div>
            <div class="text">推送日志 </div>
          </div>
        </div>
        <div style="display: flex; justify-content: space-between; margin-bottom: 20px">
          <div class="button-left">
            <a-radio-group v-model="upType" @change="pushLogList(1)" type="button">
              <a-radio :value="1">上游推送</a-radio>
              <a-radio :value="2">下游推送</a-radio>
            </a-radio-group>
          </div>
          <a-button
            v-if="upType == 2"
            type="primary"
            :loading="supplementLoad"
            @click="supplementTheOrderFn"
            >立即推送</a-button
          >
        </div>
        <a-table :data="pushLogArray" :loading="pushLogLoad" :pagination="false">
          <template #columns>
            <a-table-column
              v-for="item of columns_pushLog"
              :key="item.key"
              align="left"
              :title="(item.title as string)"
              :width="item.width"
              :data-index="(item.key as string)"
            >
              <template v-if="item.key === 'username'" #cell="{ record }">
                <span v-if="record.adminName">{{ record.adminName }}</span>
                <span v-else>管理员</span>
              </template>
              <template v-if="item.key === 'success'" #cell="{ record }">
                <a-tag v-if="record.success" color="arcoblue">成功</a-tag>
                <a-tag v-else color="red">失败</a-tag>
              </template>
              <template v-else-if="item.key === 'actions'" #cell="{ record }">
                <a-space>
                  <a-button
                    size="small"
                    status="warning"
                    class="butten"
                    type="text"
                    @click="openMessageDetail(record, 2)"
                  >
                    详情
                  </a-button>
                </a-space>
              </template>
            </a-table-column>
          </template>
        </a-table>
        <TableFooter :pagination="paginationPushLog" position="center" />
      </div>
    </a-drawer>
    <!--报文 -->
    <a-modal
      v-model:visible="messageVisibles"
      title="报文详情"
      width="600px"
      :mask-closable="false"
      title-align="start"
    >
      <div>
        <a-form ref="userForm" :auto-label-width="true" :model="messDetails">
          <a-form-item field="url" label="请求链接">
            <a-textarea
              class="nonecopy"
              v-model="messDetails.url"
              @click="useCommon.copy(messDetails.url)"
              readonly
            />
          </a-form-item>
          <a-form-item field="headers" v-if="messDetails.headers" label="请求头">
            <a-textarea
              v-model="messDetails.headers"
              readonly
              @click="useCommon.copy(messDetails.headers)"
            />
          </a-form-item>
          <a-form-item field="body" v-if="messDetails.body" label="请求参数">
            <a-textarea
              v-model="messDetails.body"
              readonly
              @click="useCommon.copy(messDetails.body)"
            />
          </a-form-item>
          <a-form-item field="result" label="上游报文">
            <a-textarea
              v-model="messDetails.result"
              readonly
              @click="useCommon.copy(messDetails.result)"
            /> </a-form-item
          ><a-form-item field="id" label="常见问题">
            <a-collapse :default-active-key="['1']">
              <a-collapse-item header="为什么会失败，具体是怎么回事要怎么解决？" key="1">
                <div>1：操作失败一般都是上游的问题</div>
                <div>2：怎么解决：联系上游，将报文发送给上游咨询解决方法</div>
                <div
                  >3：为什么会操作失败，比如系统给上游说了一句话，上游告诉系统说不
                  行，然后系统这边就无法正常处理操作</div
                >
                <div
                  >4：名词解释：请求链接为系统通过什么途径对上游说话；请求参数为系
                  统对上游说的话；上游报文为上游给系统的回话</div
                >
              </a-collapse-item>
            </a-collapse>
          </a-form-item>
        </a-form>
      </div>
      <template #footer>
        <a-space />
      </template>
    </a-modal>
    <!-- 切换订单 -->
    <a-modal
      v-model:visible="changeVisible"
      title="切换订单"
      width="500px"
      :mask-closable="false"
      @before-close="changeClose"
      title-align="start"
    >
      <a-alert style="margin-bottom: 20px; background-color: #e8f7ff" :show-icon="false">
        <span style="color: #3491fa"> 使用以下信息下一个新的订单，可修改信息再下单</span>
      </a-alert>
      <a-form ref="changeRef" :auto-label-width="true" :model="changeInfo">
        <a-form-item
          label="商城商品"
          field="mallId"
          :rules="[{ required: true, message: '商城商品不能为空' }]"
          :validate-trigger="['change', 'input']"
          asterisk-position="end"
        >
          <a-select
            allow-search
            v-model="changeInfo.mallId"
            placeholder="请选择商城商品"
            allow-clear
            @change="changeMall"
            :options="goodAllList"
          />
        </a-form-item>
        <a-form-item
          label="姓名"
          field="expressName"
          :rules="[{ required: true, message: '姓名不能为空' }]"
          :validate-trigger="['change', 'input']"
          asterisk-position="end"
        >
          <a-input hide-button v-model="changeInfo.expressName" placeholder="请输入姓名" />
        </a-form-item>
        <a-form-item
          label="手机号码"
          field="expressPhone"
          :rules="[{ required: true, message: '手机号码不能为空' }]"
          :validate-trigger="['change', 'input']"
          asterisk-position="end"
        >
          <a-input hide-button v-model="changeInfo.expressPhone" placeholder="请输入手机号码" />
        </a-form-item>
        <a-form-item label="身份证号" field="expressIdCard">
          <a-input hide-button v-model="changeInfo.expressIdCard" placeholder="请输入身份证号" />
        </a-form-item>
        <a-form-item label="地区" field="regionalCode">
          <a-cascader
            v-model="changeInfo.regionalCode"
            :options="districtsList"
            :field-names="fieldNames"
            placeholder="请输入地区"
          />
        </a-form-item>
        <a-form-item
          label="详细地址"
          field="expressAddress"
          :rules="[{ required: true, message: '详细地址不能为空' }]"
          :validate-trigger="['change', 'input']"
          asterisk-position="end"
        >
          <a-input hide-button v-model="changeInfo.expressAddress" placeholder="请输入详细地址" />
        </a-form-item>
        <a-form-item label="身份证人像面" field="photoFullFace">
          <a-upload
            action="/app/admin/mall/file/upload/private"
            :show-file-list="false"
            @success="onCardSuccess4"
            @error="onError"
            :image-preview="true"
          >
            <template #upload-button>
              <div
                class="arco-upload-list-picture custom-upload-avatar"
                v-if="changeInfo.photoFullFace"
              >
                <img
                  :src="
                    urla +
                    '/app/admin/mall/file/download/private?path=' +
                    encodeURIComponent(changeInfo.photoFullFace)
                  "
                />
                <div class="arco-upload-list-picture-mask">
                  <IconEdit />
                </div>
              </div>
              <div class="arco-upload-picture-card" v-else>
                <div class="arco-upload-picture-card-text">
                  <IconPlus />
                </div>
              </div>
              <!-- </div> -->
            </template>
          </a-upload>
        </a-form-item>
        <a-form-item label="身份证国徽面" field="photoReverseSide">
          <a-upload
            action="/app/admin/mall/file/upload/private"
            :show-file-list="false"
            @success="onCardSuccess5"
            @error="onError"
            :image-preview="true"
          >
            <template #upload-button>
              <div
                class="arco-upload-list-picture custom-upload-avatar"
                v-if="changeInfo.photoReverseSide"
              >
                <img
                  :src="
                    urla +
                    '/app/admin/mall/file/download/private?path=' +
                    encodeURIComponent(changeInfo.photoReverseSide)
                  "
                />
                <div class="arco-upload-list-picture-mask">
                  <IconEdit />
                </div>
              </div>
              <div class="arco-upload-picture-card" v-else>
                <div class="arco-upload-picture-card-text">
                  <IconPlus />
                </div>
              </div>
              <!-- </div> -->
            </template>
          </a-upload>
        </a-form-item>
        <a-form-item label="免冠照" field="photoBareheaded">
          <a-upload
            action="/app/admin/mall/file/upload/private"
            :show-file-list="false"
            @success="onCardSuccess6"
            @error="onError"
            :image-preview="true"
          >
            <template #upload-button>
              <div
                class="arco-upload-list-picture custom-upload-avatar"
                v-if="changeInfo.photoBareheaded"
              >
                <img
                  :src="
                    urla +
                    '/app/admin/mall/file/download/private?path=' +
                    encodeURIComponent(changeInfo.photoBareheaded)
                  "
                />
                <div class="arco-upload-list-picture-mask">
                  <IconEdit />
                </div>
              </div>
              <div class="arco-upload-picture-card" v-else>
                <div class="arco-upload-picture-card-text">
                  <IconPlus />
                </div>
              </div>
              <!-- </div> -->
            </template>
          </a-upload>
        </a-form-item>

        <!-- <a-form-item field="divideCustomersId" label="划分客户">
          <a-select
            v-model="changeInfo.divideCustomersId"
            placeholder="请选择客户"
            allow-clear
            allow-search
            :options="userList"
            :virtual-list-props="{ height: 200 }"
          />
        </a-form-item> -->
      </a-form>
      <template #footer>
        <div style="display: flex; justify-content: space-between; width: 100%">
          <a-checkbox v-model="checkedOrder">取消原订单</a-checkbox>
          <a-space>
            <a-button @click="changeClose">取消</a-button>
            <a-button type="primary" @click="changeSub">确定</a-button>
          </a-space>
        </div>
      </template>
    </a-modal>
    <!-- 标记订单 -->
    <a-modal
      v-model:visible="markShow"
      @before-close="markShow = false"
      title="标记订单"
      width="600px"
      :mask-closable="false"
      title-align="start"
    >
      <a-form :auto-label-width="true" :model="markInfo">
        <a-form-item label="标记备注">
          <div style="display: flex; align-items: center">
            <img style="width: 17px; height: 17px" :src="oneNumber.link" />
            <div style="line-height: 17px; text-align: center; margin-left: 10px">{{
              oneNumber.remarks
            }}</div>
          </div>
        </a-form-item>
        <a-form-item field="link" label="选择标记">
          <a-radio-group class="radio-bcg" v-model="markInfo.link">
            <a-radio v-for="item in useCommon.flagList" :key="item.type" :value="item.img">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">
                    <img style="width: 17px; height: 17px" :src="item.img" />
                  </div>
                </div>
              </template>
            </a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item field="remarks" hide-label>
          <a-textarea v-model="markInfo.remarks" placeholder="请输入标记备注" allow-clear />
        </a-form-item>
      </a-form>
      <div v-if="tagOneList.length > 0">
        <div style="font-size: 16px">历史标记</div>
        <div style="max-height: 150px; overflow-y: auto">
          <div
            v-for="item in tagOneList"
            :key="item.id"
            style="border-bottom: 1px solid #f2f3f5; font-size: 13px; color: #86909c"
          >
            <div
              >{{ item.adminName }} <span>{{ item.createTime }}</span></div
            >
            <div style="padding: 10px 0; color: #000000">
              <div style="display: flex; align-items: center">
                <img style="width: 17px; height: 17px" :src="item.link" />
                <div style="line-height: 17px; text-align: center; margin-left: 10px">{{
                  item.remarks
                }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <template #footer>
        <a-space>
          <a-button @click="markShow = false">取消</a-button>
          <a-button type="primary" :loading="markLoad" @click="markFn">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 取消订单 -->
    <a-modal
      v-model:visible="cancelShow"
      @before-close="cancelShow = false"
      :title="cancelTitle"
      width="600px"
      :mask-closable="false"
      title-align="start"
    >
      <a-alert :show-icon="false" style="margin-bottom: 10px; background-color: #e8f7ff">
        <span style="color: #3491fa !important">
          {{
            radioType == 1
              ? '删除订单后，订单只有在总后台查询可以查到'
              : '进行中订单可直接进行去掉，其他订单状态需要上游有接口才可以取消'
          }}
        </span>
      </a-alert>
      <a-input
        v-model="cancelText"
        :placeholder="radioType == 1 ? '请输入删除原因' : '请输入取消原因'"
        allow-clear
      />
      <template #footer>
        <a-space>
          <a-button @click="cancelShow = false">取消</a-button>
          <a-button type="primary" :loading="cancelLoad" @click="cancelSub">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 日志详情 -->
    <a-modal v-model:visible="messageVisible" title-align="start" width="600" hide-cancel>
      <template #title> {{ number == 1 ? '报文详情' : '推送详情' }} </template>
      <a-form ref="userForm" :auto-label-width="true" :model="messageDetail">
        <a-form-item v-if="number == 1" field="upstreamOrderNumber" label="操作状态">
          <div class="radio-bcg">
            <div v-if="messageDetail.error">操作失败</div>
            <div v-else>操作成功</div>
          </div>
        </a-form-item>
        <a-form-item v-if="number == 2" field="upstreamOrderNumber" label="推送状态">
          <div class="radio-bcg">
            <div v-if="messageDetail.success == false">接收失败</div>
            <div v-else>接收成功</div>
          </div>
        </a-form-item>
        <a-form-item
          v-if="messageDetail.upstreamOrderNumber"
          field="upstreamOrderNumber"
          label="上游单号"
        >
          <a-textarea
            class="nonecopy"
            v-model="messageDetail.upstreamOrderNumber"
            @click="useCommon.copy(messageDetail.upstreamOrderNumber)"
            readonly
          />
        </a-form-item>
        <a-form-item field="url" label="请求链接">
          <a-textarea
            class="nonecopy"
            v-model="messageDetail.url"
            readonly
            @click="useCommon.copy(messageDetail.url)"
          />
        </a-form-item>
        <a-form-item field="headers" v-if="messageDetail.headers" label="请求头">
          <a-textarea
            v-model="messageDetail.headers"
            readonly
            @click="useCommon.copy(messageDetail.headers)"
          />
        </a-form-item>
        <a-form-item field="body" v-if="messageDetail.body && number == 1" label="请求参数">
          <a-textarea
            v-model="messageDetail.body"
            readonly
            @click="useCommon.copy(messageDetail.body)"
          />
        </a-form-item>
        <a-form-item field="body" v-if="messageDetail.body && number == 2" label="推送内容">
          <a-textarea
            v-model="messageDetail.body"
            readonly
            @click="useCommon.copy(messageDetail.body)"
          />
        </a-form-item>
        <a-form-item field="result" label="返回报文">
          <a-textarea
            v-model="messageDetail.result"
            readonly
            @click="useCommon.copy(messageDetail.result)"
          /> </a-form-item
        ><a-form-item v-if="number == 1" field="id" label="常见问题">
          <a-collapse :default-active-key="['1', 2]">
            <a-collapse-item header="为什么会失败，具体是怎么回事要怎么解决？" key="1">
              <div>1：操作失败一般都是上游的问题</div>
              <div>2：怎么解决：联系上游，将报文发送给上游咨询解决方法</div>
              <div
                >3：为什么会操作失败，比如系统给上游说了一句话，上游告诉系统说不
                行，然后系统这边就无法正常处理操作</div
              >
              <div
                >4：名词解释：请求链接为系统通过什么途径对上游说话；请求参数为系
                统对上游说的话；上游报文为上游给系统的回话</div
              >
            </a-collapse-item>
          </a-collapse>
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space />
      </template>
    </a-modal>
    <!-- 详情 -->
    <a-modal
      title-align="start"
      v-model:visible="visible"
      :mask-closable="false"
      width="800px"
      title="月月返详情"
    >
      <a-table
        :bordered="{ wrapper: tables.bordered, cell: tables.bordered }"
        :stripe="(tables.striped as boolean)"
        :data="tableData2"
        :pagination="false"
        :column-resizable="true"
        :rowKey="rowKey"
        table-layout-fixed
      >
        <template #columns>
          <a-table-column
            v-for="item of commissitionCoumn"
            :key="item.key"
            :title="(item.title as string)"
            :data-index="(item.key as string)"
            :width="item.width"
            :ellipsis="true"
            :tooltip="true"
          >
            <template v-if="item.key === 'rebateTime'" #cell="{ record }">
              <span>
                {{ record.rebateTime ? record.rebateTime : '- - -' }}
              </span>
            </template>
            <template v-if="item.key === 'state'" #cell="{ record }">
              <span>
                {{
                  record.state == 1
                    ? '已结算'
                    : record.state == 0
                    ? '冻结中'
                    : record.state == 2
                    ? '已失败'
                    : '已回收'
                }}
              </span>
            </template>
          </a-table-column>
        </template>
      </a-table>
      <template #footer>
        <a-space />
      </template>
    </a-modal>
    <!-- 回收佣金 -->
    <a-modal
      title-align="start"
      v-model:visible="infoDetailVisible"
      :mask-closable="false"
      width="600px"
      title="回收返佣"
    >
      <a-form ref="flowRef" :auto-label-width="true" :model="infoDetail">
        <a-form-item
          v-if="infoDetail.type == 2 && everyList.length > 0"
          field="month"
          label="月月返"
          :rules="[{ required: true, message: '月月返不能为空' }]"
          :validate-trigger="['change', 'input']"
          asterisk-position="end"
        >
          <a-select
            v-model="infoDetail.month"
            style="width: 100%"
            multiple
            placeholder="请选择回收期数"
            allow-clear
            allow-search
          >
            <a-option v-for="item in everyList" :key="item.month" :value="item.month">{{
              item.monthName
            }}</a-option>
          </a-select>
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="monthCFn">取消</a-button>
          <a-button type="primary" :loading="loadings" @click="monthSub">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 商品图片展示 -->
    <a-image-preview-group
      v-model:visible="imgShow"
      :default-current="0"
      infinite
      :srcList="imgArray"
    />
    <!-- 打印面单 -->
    <a-modal
      v-model:visible="blackmailShow"
      @before-close="blackmailShow = false"
      title="面单尺寸"
      width="700px"
      :mask-closable="false"
      title-align="start"
    >
      <a-radio-group class="radio-bcg" v-model="mianType">
        <a-radio :value="0">
          <template #radio="{ checked }">
            <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
              <div className="custom-radio-card-mask">
                <div className="custom-radio-card-mask-dot"></div>
              </div>
              <div className="custom-radio-card-title">76mmx130mm</div>
            </div>
          </template>
        </a-radio>
        <a-radio :value="2">
          <template #radio="{ checked }">
            <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
              <div className="custom-radio-card-mask">
                <div className="custom-radio-card-mask-dot"></div> </div
              ><div className="custom-radio-card-title">100mm x 115mm‌ </div>
            </div>
          </template>
        </a-radio>
        <a-radio :value="1">
          <template #radio="{ checked }">
            <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
              <div className="custom-radio-card-mask">
                <div className="custom-radio-card-mask-dot"></div> </div
              ><div className="custom-radio-card-title">100mm x 150mm‌ </div>
            </div>
          </template>
        </a-radio>
        <a-radio :value="3">
          <template #radio="{ checked }">
            <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
              <div className="custom-radio-card-mask">
                <div className="custom-radio-card-mask-dot"></div> </div
              ><div className="custom-radio-card-title">100mm x 180mm‌ </div>
            </div>
          </template>
        </a-radio>
      </a-radio-group>
      <template #footer>
        <a-space>
          <a-button @click="blackmailShow = false">取消</a-button>
          <a-button type="primary" :loading="loadings" @click="btnClickPrint(printForm)"
            >打印</a-button
          >
        </a-space>
      </template>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
  import { getLodop } from './LodopFuncs' //导入模块
  import { get, post } from '@/api/http'
  import { usePagination, useRowKey, useTable } from '@/hooks/table'
  import { onMounted, reactive, ref } from 'vue'
  import useCommonStore from '@/store/modules/common'
  import { Message, Modal } from '@arco-design/web-vue'
  import { reSetImage } from '@/api/imageNiu'
  const urla = ref(window.location.protocol + '//' + window.location.host)
  //打单
  const blackmailShow = ref(false)
  const imagePath = ref('')
  const mianType = ref(0)
  const printForm: any = ref({})
  function openPrint(val: any) {
    if (val.expressWayBill) {
      printForm.value = val
      mianType.value = 0
      blackmailShow.value = true
    } else {
      Message.error('当前订单无法打印面单')
    }
  }
  function btnClickPrint(val: any) {
    blackmailShow.value = false
    let LODOP = getLodop() //调用getLodop获取LODOP对象
    LODOP.PRINT_INIT('')
    LODOP.SET_PRINT_STYLE('Stretch', 2)
    LODOP.SET_PRINT_STYLE('AlignJustify', 2)
    LODOP.SET_PRINT_PAGESIZE(
      1,
      mianType.value == 0 ? '76mm' : '100mm',
      mianType.value == 0
        ? '130mm'
        : mianType.value == 1
        ? '150mm'
        : mianType.value == 2
        ? '115mm'
        : '180mm'
    )
    const imageList = ['url:' + urla.value + val.expressWayBill]
    // 遍历图片数组，逐个添加到打印任务中
    imageList.forEach(function (path: any) {
      LODOP.NewPage()
      LODOP.ADD_PRINT_IMAGE(0, 0, '100%', '100%', path) // 这里的坐标和大小可以根据需要调整
      // LODOP.SET_PRINT_STYLEA(index + 1, 'ItemType', 2) // 设置当前项为图片项
    })
    LODOP.PREVIEW()
  }
  function openCommission(val: any) {
    val.goodsNum = 0
    val.goodsCost = 0
    val.goodsPrice = 0
    val.mallOrderItems.forEach((item: any) => {
      val.goodsNum = val.goodsNum + item.number
      val.goodsCost = val.goodsCost + item.number * item.cost
      val.goodsPrice = val.goodsPrice + item.number * item.price
    })
    key.value = 'rebates'
    kuaidiFn()
    val.age = useCommon.getGenderAndAge(val.expressIdCard ? val.expressIdCard : '')
    infoForm.value = val
    rebatesListFn(1)
    infoVisible.value = true
  }
  function openLog(val: any) {
    val.goodsNum = 0
    val.goodsCost = 0
    val.goodsPrice = 0
    val.mallOrderItems.forEach((item: any) => {
      val.goodsNum = val.goodsNum + item.number
      val.goodsCost = val.goodsCost + item.number * item.cost
      val.goodsPrice = val.goodsPrice + item.number * item.price
    })
    key.value = 'log'
    kuaidiFn()
    val.age = useCommon.getGenderAndAge(val.expressIdCard ? val.expressIdCard : '')
    infoForm.value = val
    massFn(1)
    infoVisible.value = true
  }
  function handleRowClick(record: any) {
    // 获取行的下标
    tableIndex.value = table.dataList.findIndex((element: any) => element.id === record.id)
  }
  const showIdNum = ref('')
  const showPhoneNum = ref('')
  const showPhoneNumber = (item, index) => {
    if (showPhoneNum.value == item.id) {
      showPhoneNum.value = ''
    } else {
      showPhoneNum.value = item.id
    }
  }
  const showIdNumber = (item, index) => {
    if (showIdNum.value == item.id) {
      showIdNum.value = ''
    } else {
      showIdNum.value = item.id
    }
  }
  //展示图片
  const imgShow = ref(false)
  const imgArray: any = ref([])
  function openImg(val: any) {
    imgArray.value = JSON.parse(JSON.stringify(val.img))
    imgArray.value.forEach((item: any, index: any) => {
      imgArray.value[index] = reSetImage(item)
    })
    imgShow.value = true
  }
  //月月返详情
  const tableData2: any = ref([])
  const visible = ref(false)
  //获取详情
  function detailFn(val: any) {
    if (val.everyMonthCommission) {
      tableData2.value = val.everyMonthCommission
      visible.value = true
    }
  }

  const commissitionCoumn = [
    {
      title: '月份',
      key: 'month',
      dataIndex: 'month',
      align: 'center',
      checked: true,
      width: 100,
    },
    {
      title: '返佣金额',
      key: 'commission',
      dataIndex: 'commission',
      align: 'center',
      checked: true,
      width: 100,
    },
    {
      title: '返佣状态',
      key: 'state',
      dataIndex: 'state',
      align: 'center',
      checked: true,
      width: 120,
    },
    {
      title: '返佣时间',
      key: 'rebateTime',
      dataIndex: 'rebateTime',
      align: 'center',
      checked: true,
      width: 180,
    },
  ]
  const infoDetail: any = ref({
    type: 2,
    month: [],
  })
  const infoDetailVisible = ref(false)
  const everyList: any = ref([])
  function openHui(val: any) {
    infoDetail.value.id = val.id
    if (val.everyMonthCommission) {
      everyList.value = []
      val.everyMonthCommission.forEach((item: any) => {
        item.monthName = '第' + item.month + '月'
        everyList.value.push(item)
      })
      infoDetailVisible.value = true
    } else {
      Modal.warning({
        title: '操作确认',
        content: '确定要收回此返佣？',
        cancelText: '取消',
        titleAlign: 'start',
        hideCancel: false,
        okText: '确定',
        onOk() {
          get({
            url: '/app/mall/order/commission/recycling',
            data: {
              id: val.id, //              订单ID
              type: 2,
              month: [],
            },
          }).then((res) => {
            if (res.code == 0) {
              Message.success(res.msg)
              rebatesListFn(1)
            }
          })
        },
      })
    }
  }
  const flowRef = ref()
  function monthCFn() {
    infoDetail.value = {
      type: 0,
      month: [],
    }
    infoDetailVisible.value = false
  }
  const loadings = ref(false)
  function monthSub() {
    flowRef.value?.validate().then((error: any) => {
      if (!error) {
        loadings.value = true
        get({
          url: '/app/mall/order/commission/recycling',
          data: () => {
            return {
              ...infoDetail.value,
              month: infoDetail.value.month.toString(),
            }
          },
        })
          .then((res: any) => {
            if (res.code == 0) {
              Message.success(res.msg)
              loadings.value = false
              monthCFn()
              doRefresh()
            }
          })
          .catch(() => {
            loadings.value = false
          })
      }
    })
  }

  //同步
  const syncLoad = ref(false)
  function syncFn() {
    syncLoad.value = true
    get({
      url: '/app/mall/admin/order/synchronize/refresh',
      data: () => {
        return {
          id: infoForm.value.id,
        }
      },
    })
      .then((res: any) => {
        if (res.code == 0) {
          Message.success(res.msg)
          infoVisible.value = false
          syncLoad.value = false
          doRefresh()
        }
      })
      .catch(() => {
        syncLoad.value = false
      })
  }
  //取消/删除订单
  const cancelShow = ref(false)
  const cancelLoad = ref(false)
  const cancelText = ref('')
  const radioType = ref(0)
  const cancelTitle = ref('')
  function openCancel(val: any, val1: any) {
    infoForm.value = val1
    infoVisible.value = false
    if (val == 1) {
      cancelTitle.value = '删除订单'
    } else {
      cancelTitle.value = '取消订单'
    }
    radioType.value = val
    cancelText.value = ''
    cancelShow.value = true
  }
  function cancelSub() {
    get({
      url: '/app/mall/admin/order/operate',
      data: {
        id: infoForm.value.id, //              订单ID
        type: radioType.value,
      },
    }).then((res) => {
      if (res.code == 0) {
        Message.success(res.msg)
        cancelShow.value = false
        doRefresh()
      }
    })
  }
  //标记订单
  const markShow = ref(false)
  const markLoad = ref(false)
  const markInfo: any = ref({
    link: '',
    remarks: '',
    id: '',
  })
  const oneNumber: any = ref({})
  const tagOneList: any = ref({})
  function openMark(val: any) {
    markInfo.value.id = val.id
    if (val.tagRecordList) {
      tagOneList.value = val.tagRecordList
      oneNumber.value = val.tagRecordList[0]
    }
    markInfo.value.remarks = ''
    infoVisible.value = false
    markInfo.value.link = useCommon.flagList[0].img
    markShow.value = true
  }
  //取消/标记订单
  function markFn() {
    console.log(markInfo.value)
    markLoad.value = true
    post({
      url: '/app/mall/admin/order/tag/record?id=' + markInfo.value.id,
      data: {
        ...markInfo.value,
      },
    })
      .then((res) => {
        if (res.code == 0) {
          markShow.value = false
          Message.success(res.msg)
          doRefresh()
        }
        markLoad.value = false
      })
      .catch(() => {
        markLoad.value = false
      })
  }
  //推送日志
  const pushLogArray: any = ref([])
  const pushLogLoad = ref(false)
  const upType = ref(1)
  //推送日志列表
  const columns_pushLog = [
    {
      title: '推送ID',
      dataIndex: 'id',
      key: 'id',
      ellipsis: true,
      tooltip: true,
      width: 80,
    },
    {
      title: '推送状态',
      dataIndex: 'success',
      key: 'success',
      ellipsis: true,
      tooltip: true,
      width: 80,
    },
    {
      title: '推送时间',
      dataIndex: 'time',
      key: 'time',
      width: 180,
    },

    {
      title: '操作',
      dataIndex: 'actions',
      key: 'actions',
      width: 80,
    },
  ]
  const paginationPushLog = usePagination(pushLogList)
  function pushLogList(val?: any) {
    pushLogLoad.value = true
    if (val) {
      paginationPushLog.page = val
    }
    get({
      url: '/app/mall/admin/order/push/list',
      data: {
        orderId: infoForm.value.id,
        type: upType.value,
        page: paginationPushLog.page,
        size: paginationPushLog.pageSize,
      },
    })
      .then((res) => {
        if (res.code == 0) {
          pushLogArray.value = res.data.list
          paginationPushLog.setTotalSize((res.data as any).totalSize)
        }
        pushLogLoad.value = false
      })
      .catch(() => {
        pushLogLoad.value = false
      })
  }

  const number = ref(0)
  const messageVisible = ref(false)
  const messageDetail: any = ref({})
  //报文详情
  function openMessageDetail(val: any, num: any) {
    number.value = num
    messageDetail.value = JSON.parse(JSON.stringify(val))
    messageVisible.value = true
  }

  const supplementLoad = ref(false)
  //提交订单
  function supplementTheOrderFn() {
    supplementLoad.value = true
    get({
      url: '/app/mall/admin/order/notify/push',
      data: {
        id: infoForm.value.id,
      },
    })
      .then((res) => {
        if (res.code == 0) {
          pushLogList(1)
          Message.success(res.msg)
        }
        supplementLoad.value = false
      })
      .catch(() => {
        supplementLoad.value = false
      })
  }

  //切换订单
  const changeVisible = ref(false)
  const changeInfo: any = ref({})
  const changeRef = ref()
  const checkedOrder = ref(false)
  function openChange(val: any) {
    infoVisible.value = false
    if (val.mallOrderItems.length > 1) {
      Message.error('多商品无法执行此操作')
    } else {
      useCommon.getDistrictsList(3).then((res: any) => {
        districtsList.value = res.data
      })
      changeInfo.value = JSON.parse(JSON.stringify(val))
      changeInfo.value.mallId = val.mallOrderItems[0].id
      changeVisible.value = true
    }
  }
  function changeSub() {
    changeRef.value.validate((error: any) => {
      if (!error) {
        get({
          url: '/app/mall/admin/order/switch',
          data: {
            cancel: checkedOrder.value,
            oldId: changeInfo.value.id,
            name: changeInfo.value.expressName,
            phone: changeInfo.value.expressPhone,
            idCard: changeInfo.value.expressIdCard,
            code: changeInfo.value.regionalCode,
            address: changeInfo.value.expressAddress,
            mallId: changeInfo.value.mallId,
            photoFullFace: changeInfo.value.photoFullFace,
            photoReverseSide: changeInfo.value.photoReverseSide,
            photoBareheaded: changeInfo.value.photoBareheaded,
          },
        }).then((res) => {
          if (res.code == 0) {
            Message.success(res.msg)
            changeClose()
            doRefresh()
          }
        })
      }
    })
  }
  function changeClose() {
    checkedOrder.value = false
    changeVisible.value = false
  }
  // 上传身份证信息
  function onCardSuccess4(fileItem: any) {
    changeInfo.value.photoFullFace = fileItem.response.data.path
  }
  function onCardSuccess5(fileItem: any) {
    changeInfo.value.photoReverseSide = fileItem.response.data.path
  }
  function onCardSuccess6(fileItem: any) {
    changeInfo.value.photoBareheaded = fileItem.response.data.path
  }
  // 上传身份证信息
  function onCardSuccess1(fileItem: any) {
    updateForm.value.photoFullFace = fileItem.response.data.path
  }
  function onCardSuccess2(fileItem: any) {
    updateForm.value.photoReverseSide = fileItem.response.data.path
  }
  function onCardSuccess3(fileItem: any) {
    updateForm.value.photoBareheaded = fileItem.response.data.path
  }
  //变更详情
  const stateLoad = ref(false)
  const stateList = ref([])
  //获取订单佣金
  const paginationLogs = usePagination(rebatesListFn)
  function getStatusChangeDetailsFn(val?: any) {
    stateLoad.value = true
    if (val) {
      paginationLogs.page = val
    }
    get({
      url: '/app/mall/order/log/get/list',
      data: {
        orderId: infoForm.value.id,
        page: paginationLogs.page,
        size: paginationLogs.pageSize,
      },
    })
      .then((res) => {
        if (res.code == 0) {
          stateList.value = res.data.list
          paginationLogs.setTotalSize((res.data as any).totalSize)
        }
        stateLoad.value = false
      })
      .catch(() => {
        stateLoad.value = false
      })
  }
  //变更详情
  const columns_state = [
    {
      title: '操作类型',
      dataIndex: 'operationType',
      key: 'operationType',
      width: 80,
    },
    {
      title: '变更前状态',
      dataIndex: 'ago',
      key: 'ago',
      ellipsis: true,
      tooltip: true,
      width: 80,
    },
    {
      title: '变更后状态',
      dataIndex: 'after',
      key: 'after',
      width: 80,
    },
    {
      title: '备注',
      dataIndex: 'remarks',
      key: 'remarks',
      width: 80,
    },
    {
      title: '变更时间',
      dataIndex: 'createTime',
      key: 'createTime',
      width: 120,
    },
  ]
  //报文日志
  const detailFny = (val: any) => {
    messDetails.value = val
    messageVisibles.value = true
  }
  const messageVisibles = ref(false)
  const messDetails: any = ref({
    headers: '',
    body: '',
  })
  const massList: any = ref([{ result: '' }])
  const columns = [
    {
      title: '操作人',
      dataIndex: 'name',
    },
    {
      title: '请求方式',
      dataIndex: 'type',
    },
    {
      title: '请求耗时',
      dataIndex: 'timing',
    },
    {
      title: '请求状态',
      dataIndex: 'success',
    },
    {
      title: '请求时间',
      dataIndex: 'time',
      width: 190,
    },
    {
      title: '操作',
      dataIndex: 'actions',
    },
  ]
  const paginationLog = usePagination(massFn)
  function massFn(val?: any) {
    tableLoading.value = true
    if (val) {
      paginationLog.page = val
    }
    get({
      url: '/app/mall/order/log/list',
      data: () => {
        return {
          orderId: infoForm.value.id,
          page: paginationLog.page,
          size: paginationLog.pageSize,
        }
      },
    })
      .then((res) => {
        massList.value = res.data.list
        tableLoading.value = false
        paginationLog.setTotalSize((res.data as any).totalSize)
      })
      .catch(console.log)
    console.log(massList.value)
  }
  //订单佣金
  const tableLoading = ref(false)
  const paginationRe = usePagination(rebatesListFn)
  const rebatesList: any = ref([])
  function rebatesListFn(val?: any) {
    tableLoading.value = true
    if (val) {
      paginationRe.page = val
    }
    get({
      url: '/app/mall/order/commission/list',
      data: () => {
        return {
          page: paginationRe.page,
          size: paginationRe.pageSize,
          orderIds: infoForm.value.id,
        }
      },
    })
      .then((res) => {
        tableLoading.value = false
        rebatesList.value = res.data.list
        paginationRe.setTotalSize((res.data as any).totalSize)
      })
      .catch(console.log)
  }
  const reCom = [
    {
      title: '客户等级',
      key: 'grade',
      dataIndex: 'grade',
      checked: true,
      width: 70,
    },
    {
      title: '客户账号',
      key: 'userName',
      dataIndex: 'userName',
      ellipsis: true,
      tooltip: true,
      checked: true,
      width: 130,
    },
    {
      title: '订单佣金',
      key: 'rebateAmount',
      dataIndex: 'rebateAmount',
      checked: true,
      width: 80,
    },
    {
      title: '佣金状态',
      key: 'rebateState',
      dataIndex: 'rebateState',
      checked: true,
      width: 70,
    },
    {
      title: '操作',
      key: 'action',
      dataIndex: 'action',
      checked: true,
      width: 70,
      fixed: 'right',
    },
  ]
  const key = ref('detail')
  // 订单详情
  const infoVisible = ref(false)
  const infoForm: any = ref({})
  const userListse: any = ref([])
  function openInfo(val: any) {
    val.goodsNum = 0
    val.goodsCost = 0
    val.goodsPrice = 0
    val.mallOrderItems.forEach((item: any) => {
      val.goodsNum = val.goodsNum + item.number
      val.goodsCost = val.goodsCost + item.number * item.cost
      val.goodsPrice = val.goodsPrice + item.number * item.price
    })
    userList.value = []
    if (val.userId) {
      get({
        url: '/app/user/get/level',
        data: {
          userId: val.userId, //              订单ID
        },
      }).then((res) => {
        if (res.code == 0) {
          userListse.value = res.data.reverse()
        }
      })
    }
    key.value = 'detail'
    kuaidiFn()
    val.age = useCommon.getGenderAndAge(val.expressIdCard ? val.expressIdCard : '')
    infoForm.value = val
    infoVisible.value = true
  }
  const tableIndex = ref(0)
  //订单详情关闭回调
  function closeDetail() {
    infoVisible.value = false
  }
  //上一单
  function previousFn() {
    tableIndex.value--
    if (tableIndex.value < 0) {
      tableIndex.value = table.dataList.length - 1
      openInfo(table.dataList[tableIndex.value])
    } else {
      openInfo(table.dataList[tableIndex.value])
    }
  }
  //下一单
  function nextFn() {
    tableIndex.value++
    if (tableIndex.value > table.dataList.length - 1) {
      tableIndex.value = 0
      openInfo(table.dataList[tableIndex.value])
    } else {
      openInfo(table.dataList[tableIndex.value])
    }
  }
  function rebateDel(val: any, val1: any, val2: any) {
    Modal.warning({
      title: '操作确认',
      content: '确定要收回此返佣？',
      cancelText: '取消',
      titleAlign: 'start',
      hideCancel: false,
      okText: '确定',
      onOk() {
        get({
          url: '/app/mall/order/commission/recycling',
          data: {
            id: val, //              订单ID
            type: val1,
            month: val2,
          },
        }).then((res) => {
          if (res.code == 0) {
            Message.success(res.msg)
            rebatesListFn(1)
          }
        })
      },
    })
  }

  function upFn() {
    Modal.warning({
      title: '操作确认',
      content: '确定要提交此订单？',
      cancelText: '取消',
      titleAlign: 'start',
      hideCancel: false,
      okText: '确定',
      onOk() {
        get({
          url: '/app/mall/admin/order/submit',
          data: {
            id: infoForm.value.id, //              订单ID
          },
        }).then((res) => {
          if (res.code == 0) {
            Message.success(res.msg)
            infoVisible.value = false
            doRefresh()
          }
        })
      },
    })
  }

  //批量发货
  const listssa = ref([])
  const deliverysVisible = ref(false)
  function openDeliverys() {
    deliverysVisible.value = true
  }
  const exportDeliverys = () => {
    // window.location.href = resourceExcel
    window.location.assign('/web/resource/excel/批量发货.xlsx')
  }
  //上传
  const onError = (fileItem: any) => {
    Message.error(fileItem.response.msg)
  }
  //上传
  const onSsl = (fileItem: any) => {
    Message.success(fileItem.response.msg)
    doRefresh()
    listssa.value = []
  }
  //发货
  const deliveryVisible = ref(false)
  const deliveryForm: any = ref({})
  const deliveryRef = ref()
  function beforeCloseDelivery() {
    deliveryForm.value.expressChannelId = ''
    deliveryForm.value.requestGenerationOrderWayBill = false
    deliveryVisible.value = false
  }
  const kuaiList: any = ref([])
  const expressChannel: any = ref([])
  function openDelivery(val: any) {
    deliveryForm.value = JSON.parse(JSON.stringify(val))
    useCommon.getDistrictsList(3).then((res: any) => {
      districtsList.value = res.data
    })
    deliveryForm.value.expressChannelId = ''
    deliveryForm.value.requestGenerationOrderWayBill = false
    get({
      url: '/app/mall/express/channel/get/list',
    }).then((res) => {
      if (res.code == 0) {
        expressChannel.value = res.data
      }
    })

    kuaidiFn()
    deliveryVisible.value = true
  }

  function confirmDelivery() {
    deliveryRef.value.validate((error: any) => {
      if (!error) {
        post({
          url: '/app/mall/admin/order/deliver/goods',
          data: {
            id: deliveryForm.value.id, //              订单ID
            expressTradeNo: deliveryForm.value.expressTradeNo, //       快递单号
            expressDeliveryCompany: deliveryForm.value.expressDeliveryCompany, //  快递公司
            adminRemark: deliveryForm.value.adminRemark, //  处理备注
            expressChannelId: deliveryForm.value.expressChannelId, //  快递渠道
            requestGenerationOrderWayBill: deliveryForm.value.requestGenerationOrderWayBill, //  生成面单
          },
        }).then((res) => {
          if (res.code == 0) {
            Message.success(res.msg)
            beforeCloseDelivery()
            doRefresh()
          }
        })
      }
    })
  }
  //编辑订单
  const updateVisible = ref(false)
  const updateForm: any = ref({})
  const updateRef = ref()
  const districtsList: any = ref([])
  const fieldNames = { value: 'code', label: 'name' }
  function openUpdate(val: any) {
    infoVisible.value = false
    useCommon.getDistrictsList(3).then((res: any) => {
      districtsList.value = res.data
    })
    kuaidiFn()
    updateForm.value = JSON.parse(JSON.stringify(val))
    updateVisible.value = true
  }
  function beforeCloseUpdate() {
    updateVisible.value = false
  }
  function confirmUpdate() {
    updateRef.value.validate((error: any) => {
      if (!error) {
        post({
          url: '/app/mall/admin/order/update',
          data: {
            ...updateForm.value,
          },
        }).then((res) => {
          if (res.code == 0) {
            Message.success(res.msg)
            beforeCloseUpdate()
            doRefresh()
          }
        })
      }
    })
  }
  //订单退款
  const refundVisible = ref(false)
  const refundForm: any = ref({})
  const refundRef = ref()
  function beforeCloseRefund() {
    refundVisible.value = false
  }
  function openRefund(val: any) {
    if (val.payType == 0) {
      val.typeName = '余额'
    } else if (val.payType == 1) {
      val.typeName = '支付宝'
    } else if (val.payType == 2) {
      val.typeName = '微信'
    } else if (val.payType == 3) {
      val.typeName = '接口'
    } else if (val.payType == 4) {
      val.typeName = '系统'
    } else if (val.payType == 5) {
      val.typeName = '库存'
    }
    val.refundNum = ''
    val.remark = ''
    val.refundKickback = false
    val.refundType = 1
    refundForm.value = val
    refundVisible.value = true
  }

  function confirmRefund() {
    refundRef.value.validate((error: any) => {
      if (!error) {
        get({
          url: '/app/mall/admin/order/refund',
          data: {
            id: refundForm.value.id, //            订单ID
            refundType: refundForm.value.refundType, //    退款类型 1手动退款 2原路退回
            refundAmount: refundForm.value.refundNum, //  退款金额
            refundRemark: refundForm.value.remark, // 退款备注
            isCommissionRebate: refundForm.value.refundKickback, //       是否收回佣金
          },
        }).then((res) => {
          if (res.code == 0) {
            Message.success(res.msg)
            beforeCloseRefund()
            doRefresh()
          }
        })
      }
    })
  }

  // const expandable = {
  //   title: '商品展开',
  //   width: 80,
  // }
  const useCommon = useCommonStore()
  const mallOrderColumns = [
    {
      title: '商品ID',
      dataIndex: 'mallId',
      key: 'mallId',
    },
    {
      title: '商品信息',
      dataIndex: 'salary',
      key: 'salary',
      width: 242,
    },
    {
      title: '下单数量',
      dataIndex: 'number',
      key: 'number',
    },
    {
      title: '商品成本',
      dataIndex: 'cost',
      key: 'cost',
    },
    {
      title: '商品金额',
      dataIndex: 'price',
      key: 'price',
    },
  ]
  //多项搜索
  const multipleVisible = ref(false)
  const multipleText = ref('')
  const close = () => {
    multipleVisible.value = false
  }
  const open = () => {
    multipleVisible.value = true
  }
  function multipleFn() {
    const arr = multipleText.value.split(/\n/g)
    form.ids = arr.toString()
    typeText.value = arr.toString()
    multipleVisible.value = false
  }
  const typeText = ref('')
  const type = ref('systemOrderNumbers')
  const typeLists = ref([
    {
      name: '订单号',
      value: 'systemOrderNumbers',
    },
    {
      name: '订单ID',
      value: 'orderIds',
    },
    {
      name: '商品ID',
      value: 'mallIds',
    },
    {
      name: '收货姓名',
      value: 'expressName',
    },
    {
      name: '手机号码',
      value: 'expressPhone',
    },
    {
      name: '快递单号',
      value: 'expressTradeNos',
    },
  ])
  function typeFn() {
    for (var key in form) {
      if (key !== type.value) {
        form[key] = ''
      }
    }
  }

  const form = reactive({
    systemOrderNumbers: '', //     系统订单号
    ids: '', //                    订单ID
    mallIds: '', //                商品ID
    expressName: '', //            收件人名称
    expressPhone: '', //           收件人手机
    expressTradeNos: '', //        快递单号
    classIds: [], //               分类ID
    orderType: '', //              订单类型 0直属订单 1下属订单
    userIds: [], //                 用户ID
    source: '', //                 来源
    payType: '', //                支付类型
    state: '', //                  订单状态
    operatorId: '', //             运营商
    channelId: '', //              渠道ID
    expressDeliveryCompany: '', // 快递公司
    commissionRule: '', //         佣金规则
    activation: '', //             激活状态 true 激活 false 未激活
    firstCharge: '', //            首充状态 true 激活 false 未激活
    settlement: '', //             结算状态 true 激活 false 未激活
    tagRecord: '', //              标记状态 true 激活 false 未激活
    addActivationTime: '', //      开始激活时间
    endActivationTime: '', //      结束激活时间
    addFirstChargeTime: '', //     开始首充时间
    endFirstChargeTime: '', //     结束首充时间
    addTime: '', //                开始时间
    endTime: '', //                结束时间
    addNum: '', //                 开始数量
    endNum: '', //                 结束数量
    addOrderAmount: '', //         开始金额
    endOrderAmount: '', //         结束金额
    addExpressFee: '', //          开始快递费
    endExpressFee: '', //          结束快递费
  })

  //列表操作
  const pagination = usePagination(doRefresh)
  const rowKey = useRowKey('id')
  const tableColumns = reactive({
    list: [
      {
        title: '订单信息',
        key: 'systemOrderNumber',
        dataIndex: 'systemOrderNumber',
        align: 'left',
        width: 340,
        checked: true,
      },
      {
        title: '下单信息',
        key: 'mainImage',
        dataIndex: 'mainImage',
        align: 'left',
        width: 340,
        checked: true,
      },
      {
        title: '收货信息',
        key: 'packageFee',
        dataIndex: 'packageFee',
        align: 'left',
        width: 250,
        checked: true,
        ellipsis: true,
        tooltip: true,
      },
      {
        title: '快递信息',
        key: 'kuaidi',
        dataIndex: 'kuaidi',
        align: 'left',
        width: 200,
        checked: true,
      },
      {
        title: '数据信息',
        key: 'state',
        dataIndex: 'state',
        align: 'left',
        width: 240,
        checked: true,
      },
      {
        title: '佣金信息',
        key: 'commission',
        dataIndex: 'commission',
        align: 'left',
        width: 220,
        checked: true,
      },
      {
        title: '操作',
        key: 'actions',
        dataIndex: 'actions',
        align: 'left',
        checked: true,
        width: 200,
        fixed: 'right',
      },
    ],
  })

  const seachForm = ref()
  //重置商品搜索项
  function resetFn() {
    seachForm.value?.resetFields()
    form.addOrderAmount = ''
    form.endOrderAmount = ''
    form.addExpressFee = ''
    form.endExpressFee = ''
    form.addNum = '' //                 开始数量
    form.endNum = '' //                 结束数量
    multipleText.value = ''
    typeText.value = ''
    doRefresh(1)
  }
  //获取商品列表内容
  const table = useTable()
  function doRefresh(value?: number) {
    tables.tableLoading = true
    if (value) {
      pagination.page = value
    }
    form[type.value] = typeText.value
    get({
      url: '/app/mall/admin/order/list',
      data: () => {
        return {
          pageNum: pagination.page,
          pageSize: pagination.pageSize,
          ...form,
          userIds: form.userIds.toString(),
          mallIds: form.mallIds.toString(),
          classIds: form.classIds.toString(),
          systemOrderNumbers: form.systemOrderNumbers.toString(),
        }
      },
    }).then((res: any) => {
      tables.tableLoading = false
      res.data.list.forEach((item) => {
        item.ages = useCommon.getGenderAndAge(item.expressIdCard ? item.expressIdCard : '')
      })
      table.handleSuccess(res.data.list)
      pagination.setTotalSize((res.data as any).totalSize)
    })
  }
  //列表样式操作
  const tables = reactive({
    tableLoading: false,
    bordered: false,
    striped: false,
    expand: [1],
    isExpand: false,
  })
  const onUpdateBorder = (isBordered: boolean) => {
    tables.bordered = isBordered
  }
  function onUpdateStriped(isStriped: boolean) {
    tables.striped = isStriped
  }
  function rowClassNameFun(_record: any, index: number) {
    return index % 2 === 1 && table.striped.value ? 'table-striped' : null
  }
  //跟踪API开始时间限制结束时间
  function changeTraceEnd(time: any) {
    return time.getTime() > new Date(form.endTime).getTime() //大于结束时间的不选
  }
  //跟踪API结束时间限制开始时间
  function changeTraceStart(time: any) {
    return time.getTime() < new Date(form.addTime).getTime() //小于开始时间的不选
  }
  const classList: any = ref([])
  //商品分类
  function classListFn() {
    get({
      url: '/app/mall/class/list',
    }).then((res: any) => {
      classList.value = res.data
    })
  }
  //商品
  const goodAllList: any = ref([])
  function goodAllListFn() {
    useCommon.mallFn().then((res) => {
      goodAllList.value = res.data
    })
  }
  const userList: any = ref([])
  //客户
  function getList() {
    useCommon.userLists().then((res: any) => {
      userList.value = res.data
    })
  }
  const orderStateList: any = ref([])
  function orderState() {
    useCommon.orderStateFn().then((res: any) => {
      orderStateList.value = res.data
    })
  }
  function kuaidiFn() {
    get({
      url: '/app/mall/admin/order/express/delivery/company',
    }).then((res) => {
      if (res.code == 0) {
        kuaiList.value = res.data
      }
    })
  }
  //获取渠道
  const channelList: any = ref([])
  function channelListFn() {
    get({
      url: '/app/mall/channel/name/list',
    }).then((res: any) => {
      channelList.value = res.data
    })
  }
  onMounted(() => {
    classListFn()
    goodAllListFn()
    getList()
    doRefresh()
    orderState()
    kuaidiFn()
    channelListFn()
  })
</script>

<style lang="less" scoped>
  .imgs {
    margin-left: 10px;
    width: 60px;
    height: 60px;
  }

  .img {
    width: 60px;
    height: 60px;
  }

  .col-div {
    margin-top: 20px;
    padding: 0 20px;
  }

  .col-div .arco-col {
    margin-bottom: 10px;
  }

  :deep(.arco-table-cell-fixed-expand) {
    background-color: var(--color-bg-3);
  }

  .tabs-button {
    :deep(.arco-radio-button-content) {
      width: calc(938px / 6);
      line-height: 35px;
      text-align: center;
      height: 35px;
    }

    :deep(.arco-radio-button.arco-radio-checked) {
      background-color: rgb(var(--primary-6));
      color: var(--color-bg-2);
    }

    :deep(.arco-radio-button:hover) {
      background-color: rgb(var(--primary-6));
      color: var(--color-bg-2);
    }
  }

  .demo-item {
    .text-name {
      color: #86909c;
      font-size: 14px;
    }

    .text-info {
      font-size: 16px;
      margin-top: 10px;
    }
  }

  .box {
    display: flex;
    align-items: center;
    height: 30px;
    margin: 5px 10px 10px 0px;

    .line {
      width: 4px;
      height: 15px;
      margin-right: 10px;
      background-color: #40a1ff;
    }
  }

  .padding20 {
    padding: 20px;
  }

  .display-box {
    display: flex;

    .display-right {
      margin-left: 20px;

      .text {
        font-size: 14px;
        color: #86909c;
        line-height: 23px;
      }

      .text-name {
        font-size: 15px;
        line-height: 25px;
      }
    }
  }
  .box1 {
    display: flex;
    align-items: flex-start;
    box-sizing: border-box;
    .goodsImage {
      width: 90px;
      height: 90px;
    }
    .texts {
      flex: 1;
      height: 100px;
      display: flex;
      flex-wrap: wrap;

      margin-left: 12px;
      .textItem {
        //width: 156px;
        display: inline;
        width: 100%;
        font-size: 12px;
        line-height: 20px;
        color: #1d1929;
        text-align: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .textItems {
        width: 220px;
        display: inline;
        font-size: 12px;
        line-height: 20px;
        color: #1d1929;
        text-align: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
</style>
